Can't build production file

[thojanssens]

I used create react app to create my app. I ejected the config files as I had to add the following configs into webpack:

    output: {
      globalObject: 'this',
      //...
    module: {
      rules: [
        {
            test: /\.worker\.js$/,
            use: { loader: 'worker-loader' }
        },
        //...

But when I try to build for production (npm run build), no files are generated:

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

No files shows up after File sizes after gzip: and the build folder only contains favicon.ico and manifest.json.

The application works though when I launch it with npm start.

I tried using react-app-rewired to avoid ejecting, but I have the same problem anyway + another set of problems, so I gave up with this library...

When I remove the code specific to web workers, the build then works.

webpack version is "4.19.1",
worker loader version is "^2.0.0"

[davidshore]

I had the same problem. Adding this to webpack config managed to fix it:

optimization: {
    noEmitOnErrors: false,
    //...

The production build seems to work even though it reports errors during the build process.

[cshl0ve]

@davidshore Thank you so much. I upgraded from CRA 1 to 2 and there was exactly the same issue. I set the webpack config so that the problem is completely resolved.

[snoopy1412]

I had the same problem. Adding this to webpack config managed to fix it:

optimization: {
    noEmitOnErrors: false,
    //...

The production build seems to work even though it reports errors during the build process.

nice thank you

[samuelcolvin]

I'm getting the same error; noEmitOnErrors: false "fixes" the problem, but I'm slightly scared of the error which must be causing this which I can't see and I'm skipping.

Does anyone know what's actually causing this? A proper fix would be great.

thanks so much for the worker-loader package btw, it's great.

[sombek]

Now it is exporting the files which is very good
but now when I want to use the function from chrome the console says:Uncaught TypeError: Fr.a is not a constructor also there is a weird action which is when I open the react up it says importScripts is not defined

this is how am using the worker in my component:

import Worker from "./excel.worker";
// then in the class 
const worker = new Worker();

Note my worker is located within the directory of the component is that right?

src/MyComponent
   * MyComponent.js
   * excel.worker.js 

my excel.worker file:

if ('function' === typeof importScripts) {
    importScripts('http://localhost:5000/static/xlsx/shim.min.js');
    importScripts('http://localhost:5000/static/xlsx/cpexcel.js');
    importScripts('http://localhost:5000/static/xlsx/jszip.js');
    importScripts('http://localhost:5000/static/xlsx/xlsx.js');
}
//eslint-disable-next-line
self.addEventListener('message', (e) => {
    /* My Logic with e.data */
    return postMessage(e.data});
});

Please help :(

[sombek]

Now it is exporting the files which is very good
but now when I want to use the function from chrome the console says:Uncaught TypeError: Fr.a is not a constructor also there is a weird action which is when I open the react up it says importScripts is not defined

this is how am using the worker in my component:

import Worker from "./excel.worker";
// then in the class 
const worker = new Worker();

Note my worker is located within the directory of the component is that right?

src/MyComponent
   * MyComponent.js
   * excel.worker.js 

my excel.worker file:

if ('function' === typeof importScripts) {
    importScripts('http://localhost:5000/static/xlsx/shim.min.js');
    importScripts('http://localhost:5000/static/xlsx/cpexcel.js');
    importScripts('http://localhost:5000/static/xlsx/jszip.js');
    importScripts('http://localhost:5000/static/xlsx/xlsx.js');
}
//eslint-disable-next-line
self.addEventListener('message', (e) => {
    /* My Logic with e.data */
    return postMessage(e.data});
});

Please help :(

Okay now it is working fine
The weird thing today is not showing an errors in webpack console

[mib32]

If you are using create-react-app, run this command from your app dir:

 npx eslint ./PATH_TO_YOUR_WORKER_FILE -c ./node_modules/eslint-config-react-app/index.js

This will show any errors preventing build.

[ortonomy]

BTW the fix to get this working with worker-loader and react-app-rewired is creating a config-overrides.js file and putting this inside:

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

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

@thojanssens

[l-pa]

Solved by putting

/* eslint-disable */

[alexander-akait]

Here difference problem, they are were reported:

• problems with globalObject
• problems with compatibility with webpack-dev-server
• problems with losing context of importScripts
• bug on react-app-rewired
  I closed issue, because they already reported and some of them are fixes, other fixes will be in near future