Workers don't work in library mode

[jeffpeck10x]

🐛 bug report

I recently updated my project to use a worker:

    const worker = new Worker(
      new URL("./workers/my-worker.ts", import.meta.url)
    );

When I import the package from another package in the monorepo with parcel serve, things work as expected.

However, when I parcel build the package, this happens:

$ parcel build ./src/index.ts --no-source-maps --no-optimize --no-cache
🚨 Build failed.
@parcel/packager-js: External modules are not supported when building for browser
error Command failed with exit code 1.

I am not targeting browser in my package.json.

It is not clear if this is an actual bug, or a misunderstanding on my part, but the error message is not clear anyway.

But, if I remove the line about the worker, it builds.

🎛 Configuration (.babelrc, package.json, cli command)

babel.config.json:

{
  "plugins": [
    "@parcel/babel-plugin-transform-runtime",
    ["inline-svg", { "disableSVGO": true }]
  ],
  "presets": [
    "@parcel/babel-preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

package.json (just the relevant parts)

{
  ...
  "main": "dist/main/index.js",
  "module": "dist/module/index.js",
  "source": "src/index.ts",
  "types": "index.d.ts",
  "scripts": {
    "build": "parcel build ./src/index.ts --no-source-maps --no-optimize --no-cache"
  },
  "browserslist": "> 0.2%",
  "targets": {
    "types": false,
    "main": {
      "includeNodeModules": [
        ... list of internal packages ...
      ]
    },
    "module": {
      "includeNodeModules": [
        ... list of internal packages ...
      ]
    }
  },
  "webpackEntry": "src/index.ts"
  ...
}

🤔 Expected Behavior

parcel build should successfully build, just like it does when there is no web worker. Or at least, the error message should be clearer.

😯 Current Behavior

🚨 Build failed.
@parcel/packager-js: External modules are not supported when building for browser

💁 Possible Solution

Not sure

🔦 Context

This is blocking me from building a project that uses a worker.

💻 Code Sample

    const worker = new Worker(
      new URL("./workers/my-worker.ts", import.meta.url)
    );

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.2
Node	12.18.3
npm/Yarn	1.22.10
Operating System	MacOS 10.15.7

[jeffpeck10x]

I am using an import in my web worker.

With some experimenting, I tried changing `"browserslist" to "> 10%" (instead of "> 0.2%"). After doing this, the error message is more explicit, pointing at the import statement in the web worker.

When I take that import statement out (replacing with an empty function for the moment), it builds.

[jeffpeck10x]

With some experimenting, I have found that:

"browserslist": ">.2%, not IE 11, not safari < 13, not chrome < 85, not android > 0, not dead",

and not having an import inside the worker is what I need for parcel to not fail with:

🚨 Build failed.
@parcel/packager-js: External modules are not supported when building for browser

[jeffpeck10x]

I have solved this. It turns out that I was missing { type: "module" }. 🤦

The way to create a new web worker that will allow me to import and will allow me to use "browserslist": ">.2%" is this:

    const worker = new Worker(
      new URL("./workers/my-worker.ts", import.meta.url),
      { type: "module" }
    );

I will still leave this open as a bug, as there was no indication of this in the error message and I had to spend a fair amount of time just trying different things to come to this realization.

The error message

🚨 Build failed.
@parcel/packager-js: External modules are not supported when building for browser

does not tell me anything about the Worker needing to be of type module.

Hopefully leaving this issue open in the meantime will help anyone else who is stuck on this.

[jeffpeck10x]

I'm not sure if this is helpful, but I have found that this is only an issue for .ts worker scripts.

The build succeeds if I do:

 const worker = new Worker(new URL("./workers/my-worker.js", import.meta.url))

Regardless though, the resulting build cannot execute, as described here:
#6269

Still, I hope this is a helpful clue.

[mischnic]

I'm not getting External modules are not supported when building for browser, but workers in library mode (like for module and main) is indeed broken

[jeffpeck10x]

Hey, thank you for confirming that workers in library mode are broken. I was having a tough time last week trying to understand what I was doing wrong, but it really helps to simply know that this is not possible at the moment.

Hopefully, this thread will save someone else some time if they are trying to bundle a library that uses them.

For the time being, we will do without web workers.

[jeffpeck10x]

Also, I should note that the External modules are not supported when building for browser was not consistent.

It seemed to always build with { type: "module" }, but without it, there were different things that seemed to trigger or not trigger that error and after multiple tries and changing things in between, they did not seem repeatable. I know that is a terribly unhelpful sentence, but maybe it will give some clues. The two things that seemed to work at times, and then not, were changing the browserlist and using a .js file instead of .ts. But, again, I'm not sure about how consistent those approaches were anyway.