Error: Cannot find module '@csstools/normalize.css'

[manuelbieh]

That's closely related to this (locked) issue here: https://github.com/facebook/create-react-app/issues/6886

With the difference that I'm not using create-react-app but a custom setup (that is somewhat similar to CRA) and I'm still getting this error after upgrading from 7.0.1 to 8.0.0. I've already removed node_modules and re-installed everything again as it was suggested in the other issue but it's still not working with the same error: Cannot find module '@csstools/normalize.css'.

Can be reproduced by cloning this repo, upgrading postcss-normalize to 8.0.0 and then running yarn start.

Any idea what else I have to change to make postcss and postcss-loader find the normalize.css file?

[jonathantneal]

I don’t yet know what is causing the error for you, but I suspect it has something to do with module paths. The most likely point of failure could be:

1. This package uses Node’s internal Module._resolveFilename to identify the package. This is a technique I have seen used in other packages with success (source).
2. This package uses a combination of ES5/ES6 methods to resolve the current filename (source). You can compare that with how it compiles into the CommonJS implementation and the Modules implementation versions.

I don’t see an issue in the source I have shared with you, however, I would suspect that is where the issue is coming from. If you think there are other people who can help, please feel free to show them this source code, as I think it has the highest likelihood of being the culprit.

[manuelbieh]

Thanks for the links, I will have a look!

[bnguyensn]

In my case, this was a Windows path issue as everything worked fine on my MacOS machine. I was using this as a webpack plugin as well.

The issue was that, in Windows, this line produced paths with duplicate drive letters like below, preventing correct module resolution:

In my app, I was able to fix this using Node's url.fileURLToPath() for the variable currentDirname like so (also be aware that url.fileURLToPath is only available in Node > 10.12.0):

// node_modules/postcss-normalize/index.cjs.js
// ...
const currentDirname = path.dirname(currentFilename); // Before
const currentDirname = path.dirname(url.fileURLToPath(currentURL)); // After

After that update, things worked out fine for me.

I suppose to fix this issue, one can update the variable currentDirname at the source like the above? But I'm not entirely sure if this is the correct fix yet as I'm not well-versed on this change's implications on ESM use cases, and this function requires a pretty recent Node version. Writing this here because it might help some others for now though!

[jonathantneal]

Thanks to your sleuthing, @bnguyensn, I think I was able to find the problem and resolve it by using the legacy __filename in CJS environments. This has been published in v8.0.1. Please let me know if anyone has further issues and I will reopen this issue.

Thank you again for the feedback. I would have never found it without all of your input.

[jonaskuske]

Had the same issue when using it in Vue CLI and the proposed .fileURLtoPath() fix didn't work either, maybe because I'm using WSL. 8.0.1 fixed it, thank you 🎉

[seshangamage]

Had the same did the below to solve

Uninstall package

npm remove csstools/normalize.css

After that, we have to install again

npm install csstools/normalize.css

[lucasjinreal]

npm install csstools/normalize.css

npm WARN addRemoteGit Error: Command failed: git config --get remote.origin.url
npm WARN addRemoteGit 
npm WARN addRemoteGit     at ChildProcess.exithandler (child_process.js:275:12)
npm WARN addRemoteGit     at emitTwo (events.js:126:13)
npm WARN addRemoteGit     at ChildProcess.emit (events.js:214:7)
npm WARN addRemoteGit     at maybeClose (internal/child_process.js:925:16)
npm WARN addRemoteGit     at Socket.stream.socket.on (internal/child_process.js:346:11)
npm WARN addRemoteGit     at emitOne (events.js:116:13)
npm WARN addRemoteGit     at Socket.emit (events.js:211:7)
npm WARN addRemoteGit     at Pipe._handle.close [as _onclose] (net.js:567:12)
npm WARN addRemoteGit  csstools/normalize.css resetting remote /home/jintian/.npm/_git-remotes/git-github-com-csstools-normalize-css-git-4404ab96 because of error: { Error: Command failed: git config --get remote.origin.url
npm WARN addRemoteGit 
npm WARN addRemoteGit     at ChildProcess.exithandler (child_process.js:275:12)
npm WARN addRemoteGit     at emitTwo (events.js:126:13)
npm WARN addRemoteGit     at ChildProcess.emit (events.js:214:7)
npm WARN addRemoteGit     at maybeClose (internal/child_process.js:925:16)
npm WARN addRemoteGit     at Socket.stream.socket.on (internal/child_process.js:346:11)
npm WARN addRemoteGit     at emitOne (events.js:116:13)
npm WARN addRemoteGit     at Socket.emit (events.js:211:7)
npm WARN addRemoteGit     at Pipe._handle.close [as _onclose] (net.js:567:12)
npm WARN addRemoteGit   killed: false,
npm WARN addRemoteGit   code: 1,
npm WARN addRemoteGit   signal: null,
npm WARN addRemoteGit   cmd: 'git config --get remote.origin.url' }

[ChetanGhediyaTA]

Thanks to your sleuthing, @bnguyensn, I think I was able to find the problem and resolve it by using the legacy __filename in CJS environments. This has been published in v8.0.1. Please let me know if anyone has further issues and I will reopen this issue.

Thank you again for the feedback. I would have never found it without all of your input.

I am facing the problem of '@csstools/normalize.css' any idea?

[eliasaj92]

If it helps anyone ( @ChetanGhediyaTA ) :

update npm globally: sudo npm install npm@latest -g check npm version: npm -v should be 6.13.0 or higher. If not, do hash -r then check the version again clean cache: npm cache clean --force use sudo or whatever if you come across a privilege issue reinstall node modules: rm -rf node_modules then npm install

This is how I got npm run build working again after facing this issue

[IAluI]

@jonathantneal I have this issue in the following environment

• windows 10
• node 18.12.1

Replace const currentFilename = new URL(currentURL).pathname; to const currentFilename = fileURLToPath(currentURL); in this line solve this problem. Like was suggested in this comment. This work on windows 10 and ubuntu 20.04. It's bad solution?

How i can help fix this bug? Pull request?

[annshiv]

Thanks to your sleuthing, @bnguyensn, I think I was able to find the problem and resolve it by using the legacy __filename in CJS environments. This has been published in v8.0.1. Please let me know if anyone has further issues and I will reopen this issue. Thank you again for the feedback. I would have never found it without all of your input.

I am facing the problem of '@csstools/normalize.css' any idea?

try npm i normalize-css