React app on Vercel - 404 not found error after adding Web Worker

Question

I have my React app deployed to Vercel, and it was working until I added a web worker and a background task.

The app still builds and deploys with no error, but when I visit the url I get a 404 not found error.

It still runs fine locally as well.

I'm assuming it's the way I've set up the web worker using React-App-Rewired.

I use Rewired to avoid 'ejecting' my app, and it had me create a config-overrides.js (which I think is to override defaults in Webpack)

config-override.js

module.exports = function override(config, env) {
    config.module.rules.push({
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' },
        
      })
 
    return config;
  }

I think the problem is that Vercel is not finding the file paths correctly.

I tried a few approaches to fix this that I found here: https://github.com/webpack-contrib/worker-loader/issues/176

Like adding this line before returning config:

   config.output.globalObject = '(self || this)'

It looks like people who use Next.js have had a similar problem and they fixed it like this:

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.worker\.js$/,
      loader: 'worker-loader',
      options: {
        name: 'static/[hash].worker.js',
        publicPath: '/_next/'
      }
    })

    config.output.globalObject = `(typeof self !== 'undefined' ? self : this)`

    return config
  }
}

But I'm not using Next.

package.json scripts.

   "scripts": {
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build",
        "start": "react-app-rewired  start",
        "build": "react-app-rewired  build",
        "test": "react-app-rewired  test --env=jsdom-fourteen",
        "eject": "react-scripts eject"
    },

An image so you can see my file structure (again it was working locally so I think everything is setup ok)

And here is the tutorial I followed to get set up with React-App-Rewired and web workers: https://medium.com/@danilog1905/how-to-use-web-workers-with-react-create-app-and-not-ejecting-in-the-attempt-3718d2a1166b

Any help is appreciated. Thanks!!

Answer 1

I needed to add this line right above the first line of my worker function

/* eslint-disable-next-line no-restricted-globals */

let mytimer;
/* eslint-disable-next-line no-restricted-globals */
self.onmessage = function(evt) {
    clearInterval(mytimer);

      if(evt.data.message === 'pause' || evt.data.message === 'stop' || evt.data.message === 'skip'){
        postMessage(evt.data.time)
      }

    if (evt.data.message == "start" || evt.data.message == "break") {
        var i = evt.data.time;
        mytimer = setInterval(function() {
            i--;
            postMessage(i);
        }, 1000);
        
    } 
  
};

And also have this in my config-overrides.js

config.output.globalObject = 'this';

module.exports = function override(config, env) {
    config.module.rules.push({
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' },
        
      })
      config.output.globalObject = 'this';
    return config;
  }