CRA Typescript: Compiling forever, if node_modules getting changed, while webpack is running

[johannwagner]

Is this a bug report?

Yes.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

typescript, webpack, hangs

Environment

Whoops.

$ create-react-app --info

Environment Info:
(node:5138) UnhandledPromiseRejectionWarning: TypeError: Cannot read property '1' of null
    at a.run.then.e (/usr/lib/node_modules/create-react-app/node_modules/envinfo/dist/envinfo.js:1:97255)
(node:5138) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:5138) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

• Node 11
• Create React App 2.1.0
• npm 6.4.1

Steps to Reproduce

1. Create a new CRA project with --typescript
2. Link another npm package into this project.
3. Updates files, which are included in the project, in the linked project

Expected Behavior

(Write what you thought would happen.)
Webpack should compile the new files.

Actual Behavior

Webpack hangs forever on Compiling.... If you terminate the process, it exits with exit code 0, but the compile process won't terminate and is stuck on 100% CPU forever.

Reproducible Demo

[johannwagner]

Maybe, it is a similar issue like #5667.

[miraage]

I wonder, how is it possible to have node_modules directory being changed during the compilation.

[johannwagner]

@miraage

Example:
You develop in two projects. One project is your real application, built with CRA. The other application is a library. You build the library manually and linked them via npm link.

npm link creates a symbolic link from the real application node_modules folder to the library folder. This simulates an install without having a package for this. It is nice for developing and testing at the same time. In production, you won't use this.

So, if you build the lib manually, the node_modules folder changes and Webpack will start recompiling your application. At this point, not every single file is built, so there are ongoing changes in the directory, which is read by Webpack.

[miraage]

First of all, this issue is not related to CRA. CRA is a tool to generate a modern React app. You have an issue with webpack, which is a different tool.

Then, it's totally expected to have a corrupted build in this case. Here is some documentation from the webpack website:
https://webpack.js.org/api/node/

The API only supports a single concurrent compilation at a time. When using run, wait for it to finish before calling run or watch again. When using watch, call close and wait for it to finish before calling run or watch again. Concurrent compilations will corrupt the output files.

You can try to open an issue in https://github.com/webpack/webpack repository, but I bet nobody wants to support similar cases.

So the eventual way for you: make a change -> compile -> see a change -> repeat

[johannwagner]

Okay, I see your point.
I have other projects with the same stack, but without CRA, where the same case is working fine, so I was tempted to believe, that this is a CRA issue. I will report/ask this at webpack, thanks for your time.

Best,
Johann

[miraage]

@johannwagner wow, it really worked for you? What webpack version did you use? Any chance you can setup a demo? If it is true, we must find the cause.

[Timer]

/cc @tabrindle see envinfo error please

[tabrindle]

Thanks @Timer - on it.

Update: I think this is a linux OS Version edge case where /etc/os-release is missing some info. It's actually already fixed in envinfo - I'll make a PR to update CRA to envinfo@5.11.1

[tabrindle]

@johannwagner feel free to run npx envinfo@latest --preset create-react-app and paste its contents here, the issue preventing --info from working should be resolved.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.