The issue I have is that npm start cannot start. I tried to fix with audit, deleted node_dependency directory and re-installed with npm, nothing works.
One concrete issue I see is:
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.44.2"
Yet, I also see npm -v webpack -> 6.14.14. How do I need to debug this?
Your npm -v webpack command is not correct. it will return npm version and not the webpack version.
Try npm ls webpack . you can also check your package.json file for the packages you have. or run npm ls for the full list.
make sure to install the required dependency as it states.
Eventually I could not solve the package problem with an informed debugging.
What I did was to (npm install --global yarn) and start the application through it (yarn start). It worked a lot to download the packages and eventually started the application.
So, I guess I need to switch to yarn after this point, which is ok, as long as it works :)
I just got a Mac Mini M1 for personal use, and I'm trying to run a preexisting React app. I installed nodejs and npm successfully, and running npm install does add the node_modules folder correctly as far as I can tell; but whenever I run npm start or npm run <script>, I get an error. It seems that npm can't access any of the project's dependencies. I've tried this using the rosetta terminal as well with the same results.
For an example, I initialized a new React project with npx create-react-app test_app, then cded into it and ran npm start. I got:
test_repo#0.1.0 start
> react-scripts start
sh: react-scripts: command not found
How do I get these commands to run properly and launch the app?
Here's what I'm using for node and npm:
➜ test_repo npm -v
7.6.0
➜ test_repo node -v
v15.11.0
I found a (very) hacky solution for now. I'm no expert with npm, but what I discovered is that npm scripts refer to dependencies indirectly - for example, having a command that says
"test": "jest"
tells npm to look in node_modules/.bin for a file called jest and to run that.
the issue is something to do with npm understanding this. But it's possible to get around that by putting the address of each dependency in the script, for example:
"test" "node_modules/.bin/jest"
I was able to get things to build this way. If someone comes along with a better answer, please show me up :P
I am trying to run react-native start and the following error appears
"Cannot find module 'metro-core'. Run CLI with --verbose flag for more details.
Prior to getting this message, I had a different error message saying modules was not located, so I tried this:
Delete the node_modules folder -
rm -rf node_modules && npm install
Reset packager cache - rm -fr $TMPDIR/react-* or node_modules/react-native/packager/packager.sh --reset-cache
Clear watchman watches - watchman watch-del-all
I just typed in the react-native start and the error message popped up on the simulator, which told me to look at my terminal for the error message.
This is common with NPM. Do not worry. Just follow a few steps and you will get your package.
Step 1: $ npm cache clean --force
Step 2: delete node_modules by $ rm -rf node_modules folder or delete it manually by going into the directory and right-click > delete.
Step 3: npm install
To start again, $ npm start
This worked for me. Hopes it works for you too.
Still, if it is there, kindly checks the error it displays in red and acts accordingly.
Be careful when using rm -rf.
After that,
While working on Unix systems.
Sometimes it may not allow you to install such packages. For that, you need sudo permissions.
Sometimes, the package is installed but only in your local modules, and when you try to import(require) it from outside of the directory, the error occurs.
Sometimes, your compiler read your dependencies, but not able to find this package in that, at that time also you face this error.
Anyways, don't worry. You just have to follow some steps below.
A best practice is to initialize your project using npm init before starting development. This will initialize your project and generate package.json file. (Ignore it if your project have package.json file)
Then, if you want any library as dependencies, try --save with npm install command. This will save your dependency in package.json file.
e.g. npm install metro-core --save
If any package is not found after installing, install it globally by -g flag.
Globally installed packages will be accessible within your system. e.g. npm install metro-core -g.
Note: Unix system needs SUDO permission for installing it globally.
I hope this will help you.
npm install metro-core
use command then run
I recently started using electron. I have successfully completed the 1st phase by creating a hello world app (included files index.html, main.js, package.json). Now I am trying to package the app using electron-packager but getting this error
Steps I have followed:
Created a project directory named helloworld.
Initialized the project directory using npm init command.
Then installed electron using npm install electron --save-dev.
Then created the javascript and html files as main.js and index.html respectively.
Then used npm start to execute the application.
Then installed electron-packager using npm install electron-packager.
Now the problem is coming in this step when i am trying to pacakge the app using command electron-packager .
Perform a global package install:
npm install -g electron-packager
The -g flag tells NPM to install the package globally which makes the command electron-packager available in your PATH.
If you don't want to do a global install you can install it locally and run with npx.
npm install -D electron-packager
npx electron-packager .
Alternatively, you can reference it straight from the node_modules folder (not recommended).
./node_modules/electron-packager/cli.js
There are two cases to make it work...
As discussed above, install electron globally using -g,
i.e. using npm install -g electron-packager
Change in your package.json:
"scripts": {
"start": "electron-packager ."
},
Then type in the command npm start.
This way it worked for me..
If you have installed it locally with:
npm install electron-packager
Then, it's not gonna work, install it globally as a cli:
npm install -g electron-packager
You can also get it through:
"node_modules/electron-packager/cli.js" . --all --asar
After All, if you don't get it working, install electron-packager.
Then, go to your package.json. And beneath your start scripts. Make another string named "build" and give it a value of the electron-packager command you want to run:
...
"scripts": {
"start": "electron .",
"build": "electron-packager . --asar --all"
},
...
Then, go in command prompt or terminal or bash.
Then, type:
npm run build
I might be totally off with it but my fix was that I put the dot without space just make sure in you package.json file its "start": "electron ."
Fixed it for me at least
You've to install electron-packager globally, that's why it shows 'electron-packager' is not recognized as an internal or external command
For this, you have to install electron-package globally
You can install globally by using -g option.
Example:-
npm install -g electron-packager OR npm i -g electron-packager //i stands for install
In my case it doesn't worked after npm global installation.
On the electron-builder Readme page it's recommended to install with yarn.
Yarn is strongly recommended instead of npm.
yarn add electron-builder --dev
Also we can put folder directly to PATH. On Windows 10:
Search with word "environment" and open Edit the environment variables.
Select, edit and Add new value C:\Users\USER_NAME\AppData\Roaming\npm to variable Path. Replace USER_NAME with your Windows username.
Then we might need to restart or logout.
Also in my case I enabled script execution on Windows 10 with instruction on answer below:
PowerShell says "execution of scripts is disabled on this system."
I am Learning React.js and i am using windows 8 OS.i have navigate to my root folder
1.Created the package.json file by npm init
2. install webpack by npm install -S webpack.now webpack has been downloaded to my modules folder
3. install webpack globally by typing npm install webpack -g
4. i am also having a webpack.config.js in my root folder which contains the source and ouput directory
5. when i type the webpack command i am getting the below error.
webpack is not recognized as a internal or external command,operable program or batch file
Better solution to this problem is to install Webpack globally.
This always works and it worked for me. Try below command.
npm install -g webpack
As an alternative, if you have Webpack installed locally, you can explicitly specify where Command Prompt should look to find it, like so:
node_modules\.bin\webpack
(This does assume that you're inside the directory with your package.json and that you've already run npm install webpack.)
I had this issue for a long time too. (webpack installed globally etc. but still not recognized)
It turned out that I haven't specified enviroment variable for npm (where is file webpack.cmd sitting)
So I add to my Path variable
%USERPROFILE%\AppData\Roaming\npm\
If you are using Powershell, you can type the following command to effectively add to your path :
[Environment]::SetEnvironmentVariable("Path", "$env:Path;%USERPROFILE%\AppData\Roaming\npm\", "User")
IMPORTANT : Don't forget to close and re-open your powershell window in order to apply this.
npm install -g webpack-dev-server will solve your issue
Try deleting node_modules in local directory and re-run npm install.
Maybe a clean install will fix the problem. This "command" removes all previous modules and re-installs them, perhaps while the webpack module is incompletely downloaded and installed.
npm clean-install
Add webpack command as an npm script in your package.json.
{
"name": "react-app",
"version": "1.0.0",
"scripts": {
"compile": "webpack --config webpack.config.js"
}
}
Then run
npm run compile
When the webpack is installed it creates a binary in ./node_modules/.bin folder. npm scripts also looks for executable created in this folder
Webpack CLI is now in a separate package and must be installed globally in order to use the 'webpack' command:
npm install -g webpack-cli
EDIT: Much has changed. Webpack folks do not recommend installing the CLI globally (or separately for that matter). This issue should be fixed now but the proper install command is:
npm install --save-dev webpack
This answer was originally intended as a "work-around" for the OPs problem.
We also experienced this problem and I like all the answers that suggest using a script defined in package.json.
For our solutions we often use the following sequence:
npm install --save-dev webpack-cli (if you're using webpack v4 or later, otherwise use npm install --save-dev webpack, see webpack installation, retrieved 19 Jan 2019)
npx webpack
Step 1 is a one-off. Step 2 also checks ./node_modules/.bin. You can add the second step as a npm script to package.json as well, for example:
{
...
"scripts": {
...
"build": "npx webpack --mode development",
...
},
...
}
and then use npm run build to execute this script.
Tested this solution with npm version 6.5.0, webpack version 4.28.4 and webpack-cli version 3.2.1 on Windows 10, executing all commands inside of a PowerShell window. My nodejs version is/was 10.14.2. I also tested this on Ubuntu Linux version 18.04.
I'd advise against installing webpack globally, in particular if you are working with a lot of different projects each of which may require a different version of webpack. Installing webpack globally locks you down to a particular version across all projects on the same machine.
npx webpack
It is worked for me. I'm using Windows 10 and I installed webpack locally.
For me it worked to install webpack separately. So simply:
$npm install
$npm install webpack
I'm not sure why this should be necessary, but it worked.
Just run your command line (cmd) as an administrator.
I've had same issue and just added the code block into my package.json file;
"scripts": {
"build": "webpack -d --progress --colors"
}
and then run command on terminal;
npm run build
you have to install webpack and webpack-cli in the same scope.
npm i -g webpack webpack-cli
or,
npm i webpack webpack-cli
if you install it locally you need to call it specifially
node_modules/.bin/webpack -v
Install WebPack globally
npm install --global webpack
I had this issue when upgrading to React 16.12.0.
I had two errors one regarding webpack and the other regarding the store when rendering the DOM.
Webpack Error:
webpack is not recognized as a internal or external command,operable program or batch file
Webpack Solution:
Close related VS Solution
Delete node_modules folder
Deleted package-lock.json
npm install
npm rebuild
Repeated this 2-3 times
Store Error:
Type Store<()> is not assignable to type Store<any, AnyAction>
Store Solution:
Suggestions to update my React version didn't fix this error for me, but irrespective I would recommend doing it.
My code ended up looking like this:
ReactDOM.render(
<Provider store={store as any}>
<ConnectedApp />
</Provider>,
document.getElementById('app')
);
As per this solution
This below-given commands worked for me.
npm cache clean --force
npm install -g webpack
Note - Run these commands as administrator. Once installed then close your command prompt and restart it to see the applied changes.
If you create a boilerplate folder for your JS projects so that you can use JS Modules, webpack and Babel are great tools.
Don't install webpack globally and after installing the most recent versions of both, your package.json file will be loaded up and ready to copy for future projects.
Make sure to delete the node_modules folder to decrease file size in your boilerplate folder and then to reinstall node_modules use npm install.
I forgot to run npm install and kept getting this error when trying to run my webpack dev-server until I realized I needed to run npm install to install node_modules and then it worked.
If you have just cloned a repo, you first need to run
npm install
The error your getting will be generated if you are missing project dependencies. The above command will download and install them.
I got the same error, none of the solutions worked for me, I reinstalled node and that repaired my environment, everything works again.
I also Face the same issue this command works for me
npm install --save-dev webpack
Try this folks, the cli needs to be updated to the latest version
npm install --save-dev #angular/cli#latest
credit goes go to R.Richards
https://stackoverflow.com/a/44526528/1908827
The fix for me was locally installing webpack as devDependency. Although I have it as devDependencies it was not installed in node_modules folder. So I ran
npm install --only=dev
Sometimes npm install -g webpack does not save properly. Better to use npm install webpack --save . It worked for me.
I had this same problem and I couldn't figure it out. I went through every line of code and couldn't find my error. Then I realized that I installed webpack in the wrong folder. My error was not paying attention to the folder I was installing webpack to.