Hanging at 'Files successfully emitted, waiting for typecheck results...' when using custom loaders

Describe the bug

Similar issue described here: https://github.com/facebook/create-react-app/issues/8707

However, that specific issue seemed to have multiple causes, one of which was resolved. This bug is still prevalent. This bug was described in this specific comment in that issue: https://github.com/facebook/create-react-app/issues/8707#issuecomment-606475886 That issue seemed to affect ionic framework. The solution for them was to revert from 3.4.1 to 3.4.0. However, I am using react-scripts 4.0.1

Essentially, using any webpack loader (at least the three I used) will leave CRA hanging on “Files successfully emitted, waiting for typecheck results…” I’ve tested workerize-loader, worker-loader, and comlink-loader (as you can tell I’m trying to incorporate web loaders into my project). Using any of these will cause the typechecking step to hang. However, running yarn tsc will run fine.

Did you try recovering your dependencies?

Doesn’t make a difference. Problem is prevalent in a fresh CRA project.

Which terms did you search for in User Guide?

Error not found there. Only instance I can find online mentioning this issue is here (https://github.com/facebook/create-react-app/issues/8707). No other mention of the issue seems to exist elsewhere (stackoverflow, other GitHub issues, etc).

Environment

Environment Info:

  current version of create-react-app: 4.0.1
  running from /Users/noah/.npm/_npx/53533/lib/node_modules/create-react-app

  System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - ~/.nvm/versions/node/v14.8.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Edge: 87.0.664.66
    Firefox: 84.0
    Safari: 14.0.2
  npmPackages:
    react: 17.0.1 => 17.0.1 
    react-dom: ^16.9.0 => 16.9.0 
    react-scripts: 4.0.1 => 4.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Install one of the worker loaders.
2. Implement workers
   • Details here: https://github.com/facebook/create-react-app/issues/8707#issuecomment-606475886

Check relevant commit in the reproducible demo for exact steps.

Expected behavior

CRA works like normal

Actual behavior

> npm run start

Starting development server...

(Hangs on this step rather than proceeding to "compiled with warnings" or "compiled successfully")
Files successfully emitted, waiting for typecheck results...

Reproducible demo

Fresh CRA project: https://github.com/NoahBres/webpack-loader-bug

Relevant commit for all the worker implementaions: https://github.com/NoahBres/webpack-loader-bug/commit/261d1f92cb6b460094f2349ea008f329cd35d691

[colinsullivan]

I am experiencing this when including an .scss file from another .scss file.

Here is a starter project from the cra-typescript template, with node-sass, and a single sass file that includes another one.

https://github.com/colinsullivan/cra-sass-import-bug

Repro steps:

git clone [e-mail]:colinsullivan/cra-sass-import-bug.git
yarn
yarn run start

Open src/colors.scss Change the color Save the file

Result:

Shell hangs on: Files successfully emitted, waiting for typecheck results...

Expected result: app complies and shell displays warnings & ready text per usual.

$ node -v
v15.5.0

Edit: When this happens, the app is still running and hot-reloading is still working. The terminal is just not displaying per usual.

[bluenote10]

I missed this duplicate… I’ve analyzed the issue and posted a cause analysis here https://github.com/facebook/create-react-app/issues/10871