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!
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.
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!
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.
Related
I have a problem that when I clone a Github repository that is older more then half a year I am not able to run it with neither npm start nor yarn start. I have been successful with one repository only and it was only a few months old. I think it might be because of the new React version. I am quite new to React so I don't know for sure.
I always get an error message that looks something like this
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-jest": "^26.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:
/Users/username/node_modules/babel-jest (version: 27.5.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /Users/username/node_modules/babel-jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-jest.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Even after following all 7 steps, I am still getting the same result. What should I do??
I was working with brownie and everything was working smoothly, launched my first useDapp app and it was a lot of fun. I wanted to see what truffle was about and installed it via npm and there were a bunch of warnings and it didn't seem smooth when it came to functionality so I might have installed it via yarn, expecting the package installer to fix things. It worked for a while then it started to timeout upon migration with tested code that used to launch perfectly fine? I thought it might of been a bug or some form of overlapping installation. I moved on to hardhat and installed it via NPM and it wouldn't compile, so I installed it via Yarn and it compiled fine. I went on to creating a new file and accidentally hit Esc when it was initializing a new file and setting the root. Somewhere in between there I tried to install the shorthand and it didn't work. It only opened a Windows help window instead of call hardhat when I typed hh --help. After that I couldn't call hardhat via yarn hardhat nor npx hardhat outside of the file....the file that previously wouldn't compile was still able to compile via npx hardhat compile?
It sometimes says "module not found", other times it says something about local installation.
I kind of got frustrated and wanted to play with react a little more and when I went to start yarn I got an error message. I followed the prompt and it didn't work, I googled it and had no luck with their common resolutions. I tried to upgrade eslint and even install 7.11.0 and it keeps saying I have version 5.16.0?.
EDIT: not sure if it is relevant, I tried to update my yarn to 1.22.17 and it said it did, although it says im running 1.22.15.
windows 7
node = v12.13.0
npm =6.12.0
The react-scripts package provided by Create React App requires a dependency:
"eslint": "^7.11.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
C:\Users\Nancy\node_modules\eslint (version: 5.16.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if C:\Users\Nancy\node_modules\eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
Kind of embarrassing, the answer was in the error message.
6. Check if C:\Users\Nancy\node_modules\eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Hardhat set root in the wrong directory and I ended up with a node_module folder in a parent directory that was messing things up
Reinstalled truffle globally via yarn add global truffle and it ran smoothly. Evidently, truffle acts up with certain NPM versions.
Hardhat doesn't seem to support global installations yet. Its been working fine being locally installed into each separate hardhat project via yarn add -D hardhat
I haven't been able to get the shorthand to work without invoking yarn first, such as yarn hh <command>
After I have created a new app with create-react-app or Razzle, error messages appear at build time which are quite concerning, security wise:
[Error: ENOENT: no such file or directory, stat '/initrd.img'] {
errno: -2,
code: 'ENOENT',
syscall: 'stat',
path: '/initrd.img'
}
Sometimes, a few other messages appear, with "/vmlinuz" "/initrd.img.old", "/vmlinuz.old" and ".steampath" instead.
Theses messages appear any time there's a build error (any build error that I generate).
This is basically the same problem as described in vue-CLI outputting very concerning error (security question) (but I was told to ask a new question). There were testimonies of three people having the same error messages in that thread.
I don't think there would be any valid reason for a React build script to stat the Linux kernel and a Steam directory, so there might be a malicious package at play here.
This only happens with npm, not yarn. (If your app has been created by CRA with yarn, you should do rm -rf node_modules && rm -rf yarn.lock && npm install);
The most minimal setup I could achieve while trying to isolate the culprits was:
creating a brand new app with create-react-app with npx create-react-app app1
and then generating an arbitrary build error in index.js, adding something like: import "nonexistent";
When I do that, I see the stat '/initrd.img'error mentioned above.
I'd like to know if you don't see the errors after executing the same exact steps. That would probably mean that it doesn't come from the packages installed but from elsewhere in my system.
It cannot come from my Node.js setup though, because I deleted my $HOME/.nvm, $HOME/.npm $HOME/node_modules, $HOME/.yarn and $HOME/.config/yarn before redoing the steps below.
There aren't many similar testimonials about this on the web, apparently. A bit more with "/.steampath" though.
I reported the issue to security#npmjs.com. They haven't replied yet.
If there is indeed a malicious script in the dependency tree of react-create-app (and Razzle), it should be investigated urgently.
Environment:
Node 14.14 installed with nvm 0.36.0
npm 6.14.8
create-react-app 3.4.1
Kubuntu 20.04
EDIT: I've also posted an issue at https://github.com/facebook/create-react-app/issues/9855. I thought this was serious and urgent enough that CRA maintainers should be notified now.
I got the same error and struggled with it for 2 days. Everything was running well on my Mac but as soon as I cloned the GitHub repository and tried to run my react app on the Linux system as well as AWS-Amplify and it showed me this same error:
[Error: ENOENT: no such file or directory, stat '/initrd.img'].
But after checking the build error logs I found that it was the problem with an import from react-bootstrap. The problem was 'the case' of the component I was importing. In my case I was importing bootstrap Container and used container instead of Container.
I simply corrected that and everything was resolved.
In my case:
WRONG: import Container from 'react-bootstrap/container'
RIGHT: import Container from 'react-bootstrap/Container'.
My Tip: Trivial mistakes like this can also give you this error. Check for incorrect imports and see the documentation for the libraries to check the cases.
In case your application is small and you have not gone too far with the development, then you can create a new react application and copy the component files one by one and run them to see which component is actually creating the problem. This is not the best idea but it worked for me the first time I got this error.
PS: Thank you for reading. This is my first answer on Stack Overflow. YAY!
There seems to be a simple answer: these messages could just come from Node searching for node_modules in the project parent directories all the way to the filesystem root. (See https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders). It might also try to follow symlinks in case they point to a node_modules directory, and emit an error each time it encounters a broken symlink in the process.
That's plausible and reassuring. No malicious script involved.
I removed initrd.img, /initrd.img.old, /vmlinuz and /vmlinuz.old, which were indeed broken symlinks. So I shouldn't get these errors anymore.
In my case it was an incorrect import statement of a static CSS file in my react-app.
VS Code for some reason auto imported a "classes" object from some random route when trying to declare const classes = useStyles(); using Material UI makeStyles method.
So check if you have any incorrect import statements of files.
In my case the message appeared when I installed new #mui/material ui lib without #emotion/react #emotion/styled complement
The missing library name was written in the error message in the console, but I had to catch it with PrtSc cause the message mentioned above replaces it almost immediately.
Node.js tries to find modules in the parent directories, up to the root. Possibly in your /boot there is a broken symlink. The message indicates that there is a package not found or a mispelled import in your codebase.
In my case this error fix manual installing react-router-dom npm i react-router-dom
For me, an npm package was missing in the package.json. Installing the package with npm install --save <package> solved the issue
In my case, an import syntax error. I had forgotten the first forward slash before 'components/MyComponent'.
In my App.js:
import MyComponent from '..components/MyComponent'
change by:
import MyComponent from '../components/MyComponent'
The same error message occurred to me. After removing all files at node_modules and running npm install to reinstall them, it says the node-sass dependency failed to run, then after rebuilt of the dep, the error disappeared.
I also saw this error. For me the reason was that I was not installing the npm package in my project directory but in some other directory.
I noticed package.json and package-lock.json in my project were not getting updated even after running npm install --save <package_name>
I've been using create-react-app to make some projects in react and also for practicing, and usually the way to run the project is to use the command npm start from the root directory of that project in the terminal. This has since stopped working for both my old projects which I haven't touched or completely new ones, and followed the exact instructions given by the error already to no effect.
An image of the error, the very top of the terminal is immediately after the npm start command:
I have been googling this over the past two days and I simply can't figure it out. I'm hoping someone with better knowledge would know the root of why npm start has stopped working. Please keep in mind that I already tried the suggestions provided by the error in the terminal.
What's really mind boggling is I haven't changed pcs or done any editing in the old projects such as the one in the picture above, re-installed a bunch of stuff I thought might have been causing issues like npm or babel but they simply don't launch anymore.
Also almost forgot the error log, which has been even more confusing to figure out or google:
You have problem with your dependencies. Please run
npm i
inside project directory.
As your console shows, you can try
remove your node_modules directory
delete file package-lock
I suggest clean npm cache (npm cache clean -f)
and reinstall node_modules using
npm i
There are many reasons to cause this problem.Some suggestions here:
1.uninstall babel-loader and create-react-app globally
npm uninstall -g babel-loader
npm install -g create-react-app
2.remove the error package
rm -rf ~/node_modules/babel-loader
3.stop all the command then clean up the cache of npm
I'm trying to make react boilerplate with webpack with this tutorial
enter link description here
But getting an error when trying run the code (npm run start). I'm getting the error when reaching the section -> Setting up webpack-dev-server
. Error message is this
From what I can tell, you lack the #babel/core npm package...
This is a classic example of when to do exactly what the error message is telling you to do. This took me A VERY LONG TIME to figure out as a developer, and I still waste time NOT following the directions on screen from time-to-time... So you are not alone if this is indeed the case.
The first issue in the error message that you have control over, is a missing #babel/core package in your node_modules/ directory. I say try satisfying the dependency by installing the package exactly as specified.
I'm sure you know how to do so already, but for clarity's sake, you'll want to enter the following command into your terminal prompt, from your project's root directory:
$ npm i #babel/core
after it's finished installing, re-enter $ npm run start and see if that fixed it.
If it doesn't, and the error message doesn't change, my only other idea would be to install babel-loader#7 like the error message is telling you to do.
$ npm i babel-loader#7
If it doesn't fix it and a new error is displayed, repeat the process until your dependencies are worked out.
Or, you can also move or rename your node_modules/ directory and enter $ npm i to rebuild your package dependencies.
make sure to keep your original node_modules/ folder handy though, just in case you need it. Once you have everything running, you are free to get rid of it.
I hope this helps!!!
run npm install --save-dev #babel/core then try building again.