Resolving webpack externals

[JesseFarebro]

I'm just going to leave this here as this problem took quite a bit of digging to figure out. Sometimes you can have webpack configs that target nodejs, (e.g., Gatsby to do SSR) and you may have a module that you're bundling in a worker that requires an undesired node module like fs. Usually, you'd specify something like "browser": { "fs": false } in package.json, config.node = { "fs": "empty" } or config.externals in your webpack config. It turns out none of these are picked up by the child compiler used by worker-plugin.

A workaround can be to manually apply the ExternalsPlugin to worker-loader:

import { ExternalsPlugin } from "webpack"

...

config.plugins = [
  new WorkerPlugin({
    plugins: [
      new ExternalsPlugin(`commonjs`, config.externals)
    ]
  })
]

...

This would apply your webpack's externals configuration to the web workers built by worker-loader. Hopefully, this saves someone's time.

[MehrdadKhnzd]

Hey there! Thanks for your explanation! I have the same problem, but I don't know what to do exactly cause I have very little knowledge about Webpack. I have an Electron app with Vue configured for it using https://github.com/nklayman/vue-cli-plugin-electron-builder, and I want to use some custom classes and some node modules inside of my worker, but I get an error for every import or require. As I know very little about Webpack, I can't really figure out what to do based on your explanation. Can you help me with this? Thanks in advance!

[eschirtz]

Wanted to ping this thread, did you ever figure this out @MehrdadKhnzd ? I have the exact same error

[MehrdadKhnzd]

@eschirtz No, I was quite busy, and as it seems something not that straightforward, I decided to leave it for now. Please let me know if you have any progress on this.