react-scripts build fails to output any files when using workerize-loader

[mattdarveniza]

Describe the bug

I know that technically web workers aren't officially supported in react-scripts yet, however given that we have issues like #7741 supported, and the discussion in #5886 I would have expected this to work.

Currently workerize-loader works within react-scripts by using the workerize-loader!./your/file webpack syntax. This works perfectly well in development, however when it comes to a build, this seems to break the build. Instead of the expected file chunks being output, it results in no files being output, like below:

λ npm run build

> worker-cra-test@0.1.0 build /Users/matt/Sites/biarri/worker-cra-test
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:


The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy

Note the empty section after File sizes after gzip. After this, the build directly only contains files copied from public, no build artefacts.

Did you try recovering your dependencies?

Yes, reproducible on fresh install.

Which terms did you search for in User Guide?

Not relevant

Environment

Environment Info:

  System:
    OS: macOS 10.15.1
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.7.0 - ~/.nvm/versions/node/v11.12.0/bin/npm
  Browsers:
    Chrome: 78.0.3904.108
    Firefox: 69.0
    Safari: 13.0.3
  npmPackages:
    react: ^16.12.0 => 16.12.0 
    react-dom: ^16.12.0 => 16.12.0 
    react-scripts: 3.2.0 => 3.2.0 
  npmGlobalPackages:
    create-react-app: Not Found

Project installed via npm

Steps to reproduce

I've produced a freshly squeezed reproducible test case to illustrate this problem

1. Clone https://github.com/mattdarveniza/worker-cra-test
2. npm install, npm start, and observe the button firing web worker code in dev
3. npm run build and observe no files being build into the build directory.
4. Remove the import from the worker and associated code in App.js, and observe that it now builds as expected.

Expected behavior

npm run build should collect and build the project into the build dir

Actual behavior

build dir only contains assets copied from public after a build.

Reproducible demo

As linked above https://github.com/mattdarveniza/worker-cra-test

Extra Info

One other thing to note is that previously I've been running a forked version of react-scripts based on PR #5886 which uses worker-loader to load workers, based on react-scripts 3.0.0. Upgrading that fork to be up to date with 3.2.0 seems to cause the same problem, so at a guess I'd say something has changed in the webpack config or webpack version that makes these worker plugins no longer... work (pardon the pun).

I'm don't have a deep enough knowledge of react-script's webpack config to have much more insight than that unfortunately.

[garrettjstevens]

@mattdarveniza this seems to be a case of webpack silently failing, which I've run into before, so I thought I'd share what I found. Starting with your reproducible demo, I ejected so as to be able to control the build script. Adding this line to the build script lets us see some more info from webpack:

diff --git a/scripts/build.js b/scripts/build.js
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -145,6 +145,7 @@ function build(previousFileSizes) {
   const compiler = webpack(config);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
+      console.log(stats.toString())
       let messages;
       if (err) {
         if (!err.message) {

Now if you run npm run build you get a whole bunch of output, but the important part is

    ERROR in ./src/test.worker.js (./node_modules/workerize-loader/dist/rpc-worker-loader.js!./node_modules/babel-loader/lib??ref--6-oneOf-1!./node_modules/eslint-loader/dist/cjs.js??ref--5-0!./src/test.worker.js)
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
      Line 1:1:  Unexpected use of 'self'  no-restricted-globals

Full Output

Creating an optimized production build...
Hash: 1ba202ac5455041a98c3
Version: webpack 4.41.0
Time: 1803ms
Built at: 11/21/2019 8:11:15 PM
                                 Asset       Size  Chunks               Chunk Names
        2b3ad10580049f12c68c.worker.js    1.5 KiB          [immutable]  
    2b3ad10580049f12c68c.worker.js.map   6.02 KiB          [dev]        
    static/css/main.b100e6da.chunk.css  586 bytes       0  [immutable]  main
static/css/main.b100e6da.chunk.css.map   1.04 KiB                       
         static/js/2.9fb05e73.chunk.js    128 KiB       2  [immutable]  
     static/js/2.9fb05e73.chunk.js.map    380 KiB       2  [dev]        
      static/js/main.c2ed9a29.chunk.js  978 bytes       0  [immutable]  main
  static/js/main.c2ed9a29.chunk.js.map   7.03 KiB       0  [dev]        main
    static/js/runtime-main.e294698f.js   1.54 KiB       1  [immutable]  runtime-main
static/js/runtime-main.e294698f.js.map    8.1 KiB       1  [dev]        runtime-main
Entrypoint main = static/js/runtime-main.e294698f.js static/js/runtime-main.e294698f.js.map static/js/2.9fb05e73.chunk.js static/js/2.9fb05e73.chunk.js.map static/css/main.b100e6da.chunk.css static/js/main.c2ed9a29.chunk.js static/js/main.c2ed9a29.chunk.js.map
 [0] ./node_modules/react/index.js 189 bytes {2} [built]
 [1] ./node_modules/object-assign/index.js 2.17 KiB {2} [built]
 [2] ./node_modules/react-dom/index.js 1.32 KiB {2} [built]
 [3] ./node_modules/workerize-loader/dist!./src/test.worker.js 312 bytes {0} [not cacheable] [built]
 [4] multi ./src/index.js 28 bytes {0} [built]
 [5] ./node_modules/react/cjs/react.production.min.js 9.25 KiB {2} [built]
 [6] ./node_modules/react-dom/cjs/react-dom.production.min.js 174 KiB {2} [built]
 [7] ./node_modules/scheduler/index.js 197 bytes {2} [built]
 [8] ./node_modules/scheduler/cjs/scheduler.production.min.js 7.03 KiB {2} [built]
 [9] ./src/index.css 39 bytes {0} [built]
[10] ./node_modules/workerize-loader/dist/rpc-wrapper.js 1.08 KiB {2} [built]
[11] ./src/App.css 39 bytes {0} [built]
[12] ./src/index.js + 2 modules 4.69 KiB {0} [built]
     | ./src/index.js 457 bytes [built]
     | ./src/App.js 326 bytes [built]
     | ./src/serviceWorker.js 3.9 KiB [built]
 [] css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css 366 bytes {0}
 [] css ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/App.css 306 bytes {0}
Child HtmlWebpackCompiler:
                          Asset     Size  Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  535 KiB       0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 1.9 KiB {0} [built]
    [1] ./node_modules/lodash/lodash.js 528 KiB {0} [built]
    [2] (webpack)/buildin/global.js 475 bytes {0} [built]
    [3] (webpack)/buildin/module.js 552 bytes {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!node_modules/postcss-loader/src/index.js??postcss!src/App.css:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/App.css 1.04 KiB {0} [built]
    [1] ./node_modules/css-loader/dist/runtime/api.js 2.35 KiB {0} [built]
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!node_modules/postcss-loader/src/index.js??postcss!src/index.css:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css 1.09 KiB {0} [built]
    [1] ./node_modules/css-loader/dist/runtime/api.js 2.35 KiB {0} [built]
Child worker:
                                 Asset      Size  Chunks               Chunk Names
        2b3ad10580049f12c68c.worker.js   1.5 KiB       0  [immutable]  main
    2b3ad10580049f12c68c.worker.js.map  6.02 KiB       0  [dev]        main
    Entrypoint main = 2b3ad10580049f12c68c.worker.js 2b3ad10580049f12c68c.worker.js.map
    [0] ./node_modules/workerize-loader/dist/rpc-worker-loader.js!./node_modules/babel-loader/lib??ref--6-oneOf-1!./node_modules/eslint-loader/dist/cjs.js??ref--5-0!./src/test.worker.js 714 bytes {0} [built] [1 error]
    
    ERROR in ./src/test.worker.js (./node_modules/workerize-loader/dist/rpc-worker-loader.js!./node_modules/babel-loader/lib??ref--6-oneOf-1!./node_modules/eslint-loader/dist/cjs.js??ref--5-0!./src/test.worker.js)
    Module Error (from ./node_modules/eslint-loader/dist/cjs.js):
    
      Line 1:1:  Unexpected use of 'self'  no-restricted-globals
    
    Search for the keywords to learn more about each error.
Compiled successfully.

File sizes after gzip:


The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://bit.ly/CRA-deploy

Done in 3.65s.

So for some reason the eslint error in the worker is causing the webpack process to stop, but webpack doesn't output any errors, so the build continues like normal. I'm not sure why that is. If you add an eslint-disable to the test.worker.js, though, and run npm run build, it works!

I don't know enough about webpack to know why the webpack build didn't return an error, hopefully someone else might be able to explain more on that because I'm very curious, too.

[mattdarveniza]

Thanks @garrettjstevens, that's a really good tip for debugging webpack issues. Bizarre that it gives you no output by default. I wonder if that's due to the nature of worker files, or something more general in CRA. More investigating to do...

[franckXu]

diff --git a/scripts/build.js b/scripts/build.js
index ec479fa..b74937b 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -140,6 +140,7 @@ module.exports = function(NODE_ENV) {
                 } else {
                     messages = formatWebpackMessages(stats.toJson({ all: false, warnings: true, errors: true }));
                 }

                 if (messages.errors.length) {
                     // Only keep the first error. Others are often indicative
                     // of the same problem, but confuse the reader with noise.
@@ -148,6 +149,12 @@ module.exports = function(NODE_ENV) {
                     }
                     return reject(new Error(messages.errors.join("\n\n")));
                 }
+
+                if (stats.hasErrors()) {
+                    return reject(new Error(stats.toString()));
+                }
+

[garrettjstevens]

Thanks @franckXu, what you posted helped me do some more research and realize there is already a PR that would fix this: #6286

Basically, that PR checks for error messages in webpack children as well as just top-level errors, so in the above example the eslint error would have showed instead of the build failing silently.

[mattdarveniza]

Given that's the root of this issue, I'll close this issue in favour of that PR

[bonham000]

@garrettjstevens thanks for finding that, just want to comment my gratitude this was very confusing for me but your solution fixes it and just saved me a lot of time and worry.