Create-react-app: Getting Error: Cannot find module '@csstools/normalize.css' after upgrade

[RyanAtViceSoftware]

Is this a bug report?

yes

Did you try recovering your dependencies?

yes

>npm --version
6.9.0

Which terms did you search for in User Guide?

Environment

C:\code\Fintech PriceSource\npm-major-version-upgrade-2\PriceSou
rce\PriceSource.UI>npx create-react-app --info
npx: installed 91 in 22.171s

Environment Info:

  System:
    OS: Windows 10
    CPU: (2) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 12.4.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
    Internet Explorer: 11.0.17134.1
  npmPackages:
    react: ^16.8.6 => 16.8.6 (15.6.2)
    react-dom: ^16.8.6 => 16.8.6
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

(Write your steps here:)

1. install older version of create-react-app
2. eject
3. manually update to newer version of create-react-app
4. update all your package.json dependencies
5. manually add the newer dependencies only found in the new create-react-app package.json file
6. delete node_modules
7. delete package-lock.json
8. npm update npm@latest
9. update node via windows nvm
10. npm install
11. npm start

Expected Behavior

app to start

Actual Behavior

Get this error

C:\code\Fintech PriceSource\npm-major-version-upgrade-2\PriceSou
rce\PriceSource.UI>npm start

> [email protected] start C:\code\Fintech PriceSource\npm-
major-version-upgrade-2\PriceSource\PriceSource.UI
> concurrently --kill-others "npm run start-script" "npm run pre
ttier-watch"

[1]
[1] > [email protected] prettier-watch C:\code\Fintech Pri
ceSource\npm-major-version-upgrade-2\PriceSource\PriceSource.UI
[1] > onchange "src/**/*.js" -- ./node_modules/.bin/prettier --w
rite {{changed}}
[1]
[0]
[0] > [email protected] start-script C:\code\Fintech Price
Source\npm-major-version-upgrade-2\PriceSource\PriceSource.UI
[0] > node scripts/start.js
[0]
[0] internal/modules/cjs/loader.js:626
[0]     throw err;
    ^
[0]
[0] Error: Cannot find module '@csstools/normalize.css'
[0] Require stack:
[0] - /C:/code/Fintech%20PriceSource/npm-major-version-upgrade-2
/PriceSource/PriceSource.UI/node_modules/postcss-normalize/index
.cjs.js
[0]     at Function.Module._resolveFilename (internal/modules/cj
s/loader.js:623:15)
[0]     at resolve (C:\code\Fintech PriceSource\npm-major-versio
n-upgrade-2\PriceSource\PriceSource.UI\node_modules\postcss-norm
alize\index.cjs.js:45:46)
[0]     at Object.<anonymous> (C:\code\Fintech PriceSource\npm-m
ajor-version-upgrade-2\PriceSource\PriceSource.UI\node_modules\p
ostcss-normalize\index.cjs.js:17:22)
[0]     at Module._compile (internal/modules/cjs/loader.js:774:3
0)
[0]     at Object.Module._extensions..js (internal/modules/cjs/l
oader.js:785:10)
[0]     at Module.load (internal/modules/cjs/loader.js:641:32)
[0]     at Function.Module._load (internal/modules/cjs/loader.js
:556:12)
[0]     at Module.require (internal/modules/cjs/loader.js:681:19
)
[0]     at require (internal/modules/cjs/helpers.js:16:16)
[0]     at Object.<anonymous> (C:\code\Fintech PriceSource\npm-m
ajor-version-upgrade-2\PriceSource\PriceSource.UI\config\webpack
.config.js:29:26)
[0]     at Module._compile (internal/modules/cjs/loader.js:774:3
0)
[0]     at Object.Module._extensions..js (internal/modules/cjs/l
oader.js:785:10)
[0]     at Module.load (internal/modules/cjs/loader.js:641:32)
[0]     at Function.Module._load (internal/modules/cjs/loader.js
:556:12)
[0]     at Module.require (internal/modules/cjs/loader.js:681:19
)
[0]     at require (internal/modules/cjs/helpers.js:16:16) {
[0]   code: 'MODULE_NOT_FOUND',
[0]   requireStack: [
[0]     '/C:/code/Fintech%20PriceSource/npm-major-version-upgrad
e-2/PriceSource/PriceSource.UI/node_modules/postcss-normalize/in
dex.cjs.js'
[0]   ]
[0] }
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno 1
[0] npm ERR! [email protected] start-script: `node scripts
/start.js`
npm ERR! Exit status 1
[0] npm ERR!
[0] npm ERR! Failed at the [email protected] start-script
script.
[0] npm ERR! This is probably not a problem with npm. There is l
ikely additional logging output above.
[0]
[0] npm ERR! A complete log of this run can be found in:
[0] npm ERR!     C:\Users\ryan.vice\AppData\Roaming\npm-cache\_l
ogs\2019-06-07T17_55_05_893Z-debug.log
[0] npm run start-script exited with code 1
--> Sending SIGTERM to other processes..
[1] npm run prettier-watch exited with code 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `concurrently --kill-oth
ers "npm run start-script" "npm run prettier-watch"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likel
y additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ryan.vice\AppData\Roaming\npm-cache\_logs\
2019-06-07T17_55_06_173Z-debug.log

Things I've tried

1. Removing node_modules, npm cache clean, npm install
2. Update npm, update node and repeating step 1

[jscul]

Bump.
This dependency error keeps popping up for me... last time it happened was like 4 months ago. Just happened again. Really frustrating problem, please fix.

EDIT: I fixed this by upgrading to the latest version of npm.
sudo npm install -g npm@latest
npm install
reboot

[RyanAtViceSoftware]

After trying @jscul's tip I'm still having this problem. Any other advice?

[bugzpodder]

removing node_modules, npm cache clean

[RyanAtViceSoftware]

Thanks @bugzpodder and I should have listed this in the original post (I'll update it) but I've tried

1. Removing node_modules, npm cache clean, npm install
2. Update npm, update node and repeating step 1

And no luck

[morissonmaciel]

Same problem here! It's occurring even in a clean docker image with latest NodeJS and npm.
Docker image doesn't have create-reacte-app installed.

[ldaume]

do you use sass?

we had the problem that react-scripts test --env-=jsdom not building the css files. Solution was to build sass first eg. node-sass --include-path ./src --include-path ./node_modules src/ -o src/

[RyanAtViceSoftware]

@ldaume we aren't using sass

[pedromelo98]

https://github.com/facebook/create-react-app/issues/6886

[RyanAtViceSoftware]

Thanks @pedromelo98 but I've tried everything in #6886 with no luck

[avenmia]

Same issue here. Ran npm cache clean, npm install. Updated npm and create-react-app

[KthProg]

The issue appears to have to do with react-scripts being installed globally, and looking for packages globally which are installed locally. If you globally install @csstools/normalize, then it will fix the issue (although I had other errors in this case).

I ended up installing react-scripts locally, and running it via node (node node_modules/react-scripts/bin/react-scripts.js build) and this worked fine.

[morissonmaciel]

Complementing @KthProg:

I think it's no necessary install @csstools globally. For our team, this issue seems to be intrinsic related to npm version and create-react-app global dependency in the build machine.

We were facing this problem in a dock container and in a physical build server where isn't possible to retain global npm modules installed.

We managed to resolve this issue using the following steps:

1. We used the npm run eject command (from react-scripts) to incorporate all React dependencies in both package.json and package-lock.json

(at this points, the error still persists but the React project is completely independent of create-react-app) ⚠️

1. Then we updated npm version from 5.6.0 to 6.9.0 (maybe the most important step ❗️)

2. Finally, we ran the npm run build command and everything worked perfectly.
   (at this point all packages related to @csstools become available to node_modules)

[Petkoski]

I had the same issue today (on W8.1), solved it with:

1. rm -rf node_modules/
2. npm cache clean
3. Installed Node.js 12.4.0 (through the installer)
4. Step 3 somehow didn't install the newest npm (not sure why), so I've done that manually:
   https://stackoverflow.com/a/31520672/4905246 (version I selected: 6.9.1-next.0)
5. Confirm:
   
6. npm install
7. npm start now works

[stale[bot]]

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[bot]]

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.