Create-react-app '编译失败。' 由于 css 导入

Question

Appearing out of nowhere, this error has me stomped. It appears any time I try to import a css file, whether in full or as a module.

Eg

import "./index.css"

or

import styles from "./button.module.css"

It MAY have been due to the latest macOS beta at least it seems to have coincided with its release. I tried rolling back from it, but that didn't work.

Failed to compile
./src/index.css (./node_modules/css-loader/dist/cjs.js?modules=true!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
CssSyntax error: Unknown word (1:1)

> 1 | var api = require("!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
    | ^
  2 |             var content = require("!!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!../node_modules/postcss-loader/src/index.js??postcss!./index.css");
  3 | 
This error occurred during the build time and cannot be dismissed.

I've tried manually adding web pack, checked everything for syntax errors, re-installed the whole repo, went back several commits and so on. Nothing seems to do anything. Happy to supply more context.

(I found one other person mentioning the same problem on SO 15 hours ago, but he hadn't supplied debugging information so the ticket was closed).

Note: The same codebase runs perfectly well on my MacBook, no problems!

Answer 1

It's seems like your npm project setup is broken. This type of problem famously called Failed to compile generally occurs when we are moving one branch to another branch more often and we sometimes forgot to do npm install and continue to work on another branch which has new packages without doing npm install and many more cases which is very hard to tell that in which cases your npm setup is broken.

There are couple of ways of solving this issue.

First way

• Delete the node_modules directory and package-lock.json file.
• Close the editor and open it again and in new terminal do npm i . Then check whether it is compiled or not.

If that didn't work then follow the second way.

Second way

Clear the npm cache forcefully of your project setup.

npm cache clear -f

Then restart the system for closing all the node service for this session. After restart do npm i and check again.

If that didn't work then follow the third way which I think that fail compilation issue will be easily solved.

Third way

Just clone your project again in another directory and do npm install .

Answer 2

The code is right. There may not be a problem with code.

The steps mentioned below might help:

1. Delete node_modules folder.
2. run npm install
3. run npm cache clean -f (try without -f first)

*first 2 steps worked for me.

Answer 3

Can you try this?

Delete these folders: node_modules and package-lock.json . (You can also delete a cache folder if there is)

Run this Commands:

With yarn: yarn

With npm: npm install

You can also try to change your import method:

import * as styles from...

This might help hopefully!