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.
Related
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>
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.
I am trying to create a React.js App however once created and I try to run using 'yarn start' in the terminal I get this:
yarn run v1.12.3
$ react-scripts start
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-eslint": "10.0.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:
/Users/olliesaunderson/node_modules/babel-eslint (version: 9.0.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 "babel-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 /Users/olliesaunderson/node_modules/babel-eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-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.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I have tried following the steps suggested however none of this seems to works. I have also tried yarn add --exact react-scripts#3.0.1 and yarn cache clean
I fixed it!
So as the error shows, there is an existing folder of 'babel-eslint' somewhere higher up in my dependency tree. All I had to do was search in finder for that folder and then delete it, once done you can just 'yarn install' again and 'yarn start' then it should work :)
I have no idea where this other 'babel-eslint' folder came from btw...
I am trying to run a server so I can start coding my website. However, I run "npm start" I have been greeted with errors. The steps to fixing this error are laid out, however, for step three I do not see babel-loader within my package.json. In addition, I am not sure if the npm ERR!(s) I get on the bottom are caused because of the issue on top or another issue in itself.
package.json
"runs" npm ls babel-loader
It looks like you have globally installed babel-loader#8.0.2. See #6, it points to the exact case you have.
Remove it from your home directory and that should fix it.
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