Create-react-app 'Failed to compile.' due to css import

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.

E.g.

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!

Have you tried deleting package-lock.json and reinstalling npm? — Sharzad Gh
– Sharzad Gh, Commented Aug 18, 2021 at 12:09
Can you show your webpack config file and the contents of the css file you're importing. — Badal Saibo
– Badal Saibo, Commented Aug 19, 2021 at 4:44
I think deleting package-lock and node_module and reinstalling dependencies might help. I faced the same kind of error when switching between node-sass versions. — only4
– only4, Commented Aug 21, 2021 at 1:55
Have you tried to increase or decrease css-loader version? I think it may help you. Install everything with yarn pls — Freestyle09
– Freestyle09, Commented Aug 24, 2021 at 7:36

Subrato Pattanaik · Accepted Answer · 2021-08-25 05:17:03Z

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.

Kenn · Accepted Answer · 2021-08-24 06:15:30Z

0

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!

answered Aug 24, 2021 at 6:15

Kenn

7061 gold badge6 silver badges7 bronze badges

Comments

kartik tyagi · Accepted Answer · 2021-08-25 05:19:30Z

0

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

The steps mentioned below might help:

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

*first 2 steps worked for me.

edited Aug 25, 2021 at 5:19

answered Aug 24, 2021 at 5:59

kartik tyagi

7,2102 gold badges17 silver badges34 bronze badges

Collectives™ on Stack Overflow

Create-react-app 'Failed to compile.' due to css import

3 Answers 3

First way

Second way

Third way

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

First way

Second way

Third way

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related