react-scripts build fails to output any files when using workerize-loader
See original GitHub issueDescribe 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
- Clone https://github.com/mattdarveniza/worker-cra-test
npm install
,npm start
, and observe the button firing web worker code in devnpm run build
and observe no files being build into thebuild
directory.- 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.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6
@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:
Now if you run
npm run build
you get a whole bunch of output, but the important part isFull Output
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 runnpm 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.
Thanks @franckXu, what you posted helped me do some more research and realize there is already a PR that would fix this: https://github.com/facebook/create-react-app/pull/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.