CRACO, worker-plugin, and, react-refresh-webpack-plugin

I’ll start by being honest - I’m not sure which repo this issue truly belongs to but I’ll start here.

I use CRACO to achieve a few things, including enabling web workers.

This is my config prior to react-scripts 4. Worked great

const { whenProd, addBeforeLoader, loaderByName } = require("@craco/craco");
const WorkerPlugin = require('worker-plugin');

module.exports = {
  webpack: {
    configure: function(webpackConfig) {
      // some stuff

      return webpackConfig;
    },
    plugins: [
      new WorkerPlugin(),
    ],
  },
};

Since updating everything, I’ve encountered some issues.

The config I’ve attempted (and some variations on)

const { whenProd, addBeforeLoader, loaderByName } = require("@craco/craco");
const WorkerPlugin = require('worker-plugin');

module.exports = {
  webpack: {
    configure: function(webpackConfig) {
      // some stuff

      return webpackConfig;
    },
    plugins: [
      new WorkerPlugin({
        globalObject: 'this',
        plugins: [
          'react-refresh-webpack-plugin'
        ]
      }),
    ],
  },
};

So this error is obviously to do with react-refresh-webpack-plugin and I’ve tried to work out how to trick it into doing the right thing but no luck.

I found https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/24 but couldn’t get anything from it to work

What should I do?

[liuliangsir]

@justrealmilk the following code snippet works with react-scripts@4.0.3

const WorkerPlugin = require('worker-plugin');

module.exports = {
  webpack: {
    configure: function(webpackConfig) {
      // some stuff

      return webpackConfig;
    },
    plugins: [
      new WorkerPlugin(),
    ],
  },
};```

[jrejaud]

Can you elaborate on your solution please? I’ve been following the guide at https://blog.johnnyreilly.com/2020/02/21/web-workers-comlink-typescript-and-react, however when my client tries to call the URL where the web worker’s file is supposed to live, there’s nothing there…