How can resolve the NPM issue? Stuck with npm start error - npm

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 :)

Related

How to fix "unable to resolve dependency tree" [duplicate]

When trying to install the npm packages using npm i command, I am getting the following exception:
I have tried reinstalling the Node.js package and setting the proxy to off using:
set HTTP_PROXY=
set HTTPS_PROXY=
The issue is still there. What I am doing wrong?
Update:
When I run the following command:
npm install --legacy-peer-deps
The following error is displayed:
This is not related to an HTTP proxy.
You have dependency conflict (incorrect and potentially broken dependency) as it says, so try to run the command with --force, or --legacy-peer-deps. If it doesn't take effect, the temporary solution is using prior versions of the Node.js (downgrading the Node.js version) as it causes this kind of errors to happen sometimes.
Update based on the OP's update:
As you see, it fires the following error:
No matching version found for #angular/http#^9.1.4.
Take a look at angular/http page. Note that the latest version for that deprecated package is 7.2.16 while you request an upper version (e.g., ^9.1.4)! So, try to check the project dependencies and follow the raised errors in order to solve the problem.
Try this command-
npm install --save --legacy-peer-deps
First to understand the problem. Here is what I have as error:
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project-admin#11.0.0
npm ERR! Found: #angular/common#11.0.3
npm ERR! node_modules/#angular/common
npm ERR! #angular/common#"11.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #angular/common#"^9.1.0 || ^10.0.0" from #agm/core#3.0.0-beta.0
npm ERR! node_modules/#agm/core
npm ERR! #agm/core#"3.0.0-beta.0" from the root project
First you should start to read the problem from the bottom to the top. Here #agm/core#3.0.0-beta.0 requires angular common 9.1.0 or 10.0.0. And the top message says that the angular common found is actually 11.0.3.
(If you want to understand dependencies little bit better, here is very simple site: How npm3 Works)
dependencies — these are the essential dependencies that you rely on and call in your project’s code
devDependencies — these are your development dependencies, for example, a prettier library for formatting code
peerDependencies — if you set a peer dependency in your package.json, you are telling the person who installs your package that they need that dependency with the specified version
optionalDependencies — these dependencies are optional and failing to install them will not break the installation process
bundledDependencies — it’s an array of packages that will come bundled with your package. This is useful when some 3rd party library is not on NPM, or you want to include some of your projects as modules
So what should be the solution then? The problem is about peer dependencies. The solution is to downgrade angular common or the solution is to use legacy dependencies logic for installing packages using --legacy-peer-deps. So --legacy-peer-deps does not try to install the peerDependencies automatically. Is this going to work for you? Probably, yes. But you should add specific instructions how to do that, or to make the use of --legacy-peer-deps automatic for future installation of the project packages with this code from one of the previous answers:
npm config set legacy-peer-deps true
In my case I installed the package and I tried to run ng serve, but because --legacy-peer-deps was used, there were dependency packages which were not installed. I had to install those manually (because I did not set the configuration from the code above). At the end installing about five packages manually, all with --legacy-peer-deps, I ended to a package that could not be installed and I did not try to continue, because my project was throwing warnings like crazy and there were a lot of packages for audit too. So my decision was not to use this package and to find an alternative.
Other solutions that I read about along the way:
downgrade Node.js to v14. This will downgrade npm. It might not be v14, but this was the version that was most widely downgraded to.
Some people use Yarn to force package installation - personally I don't understand how this works, because I haven't used Yarn.
downgrading Angular and the global Angular CLI version to version that will satisfy the requirement. In my case it is angular/common, and in the question it's angular/core, but both require downgrading the whole angular right (I am not sure about this here).
the package you install might have a higher version that doesn't require downgrading Angular. You might try to use the https://updatepackagejson.com/ to upgrade your packages to the latest, but this is in case your project is quite new.
In addition to using the --legacy-peer-deps command line option, this can also be set more permanently as a config option:
npm config set legacy-peer-deps true
Finally, I found the answer. Try this command -
npm install --save --legacy-peer-deps
Described here legacy-peer-deps
When using npm 7, this comes up a lot because peer dependencies issues are treated as errors in version 7 whereas they were generally only warnings in version 6. Usually using --legacy-peer-deps makes it work with npm 7.
When that doesn't work, an option is to downgrade to npm 6. Downgrading Node.js is not necessary (but not harmful either). The relevant dependency management code is in npm. Downgrading Node.js will often work coincidentally because doing so will often downgrade npm as well.
Another option that is less disruptive than downgrading npm is using npx to use the previous version of npm for just the install command: npx -p npm#6 npm install
And when all else fails, it's often worth a shot to remove the node_modules directory and package-lock.json, and then run npm install again. That regenerates node_modules and package-lock.json.
This happens for some packages after updating to npm 7.
Parameter --legacy-peer-deps can help:
npm i --legacy-peer-deps
Described here legacy-peer-deps
Causes npm to completely ignore peerDependencies when building a
package tree, as in npm versions 3 through 6.
If a package cannot be installed because of overly strict
peerDependencies that collide, it provides a way to move forward
resolving the situation.
...
You can set this option to true by default (not recommended by npm):
npm config set legacy-peer-deps true
Or just wait until these packages get up to date.
Just do two simple steps:
First, execute this in your terminal.
npm config set legacy-peer-deps true
Second, clear the cache:
npm cache clean --force
And finally, execute your command. This will work for sure.
The problem is related to a dependency conflict or broken dependency. You can proceed by accepting the incorrection of dependency by forcing an install.
Solution: Using command with --force.
Your command will be like npm install --force #your-npm-package.
Note: You can use yarn to install a dependency if it's available in to install with the yarn package manager.
NPM can be used to install and manage versions of dependencies in your projects.
I had it the same issue on React versions in relation with the npm version:
npm error found types/react#16.14.20
So it might be package-versions that need to be installed based on your package.json file.
It gives errors in the npm 7 version and cannot install Node.js modules.
If you will downgrade npm version to 6, those problems will become warnings and the problem will be resolved.
Try to prove this command: npm install -g npm#6
Check if version is already installed: npm --version
Remove and install node_modules package:
a) Remove rm -rf node_modules
b) Install: npm i
Try removing the node modules and package-lock.json file and run command npm install
or
Try npm cache clean --force
First I tried
npm install
It gave me error unable to resolve dependency tree and based on the help information from this command,
Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
I tried this command:
npm install --legacy-peer-deps
And it solved my problem.
Try two options to resolve this issue:
Option 1: Delete folder node_modules folder and file package_lock.json after running:
npm cache clean --force after npm i --force
Option 2: run npm install --save --legacy-peer-deps
The fastest solution: npm install --legacy-peer-deps
Explanation:
In npm versions 3 through 6, peerDependencies were not automatically installed, and would raise a warning if an invalid version of the peer dependency was found in the tree. As of npm v7, peerDependencies are installed by default.
npm docs: peerDependencies
Your dependency contains some peerDependencies that conflict with the root project's dependency.
As it described in the npm ERR log.
Disclaimer: This assumes you're on npm v7
Note: If you follow the instructions of sibling commenters, it will create a user-scoped config that won't sync consistently across teammates / machines / buildbots.
Project-based legacy peer dependencies
You will probably want legacy-peer-deps tied to your project so it proliferates across machines / developers, and doesn't contaminate your other projects.
npm config set legacy-peer-deps true --location project
This will create a local file at .npmrc which you can commit to your repository:
legacy-peer-deps=true
Then afterwards, you can just run:
npm install
Then commit the updated lockfile.
Remember, location, location, location:
per-project configuration (/path/to/my/project/.npmrc, see more):
npm config set legacy-peer-deps true --location project
per-user configuration (defaults to $HOME/.npmrc, see more)
npm config set legacy-peer-deps true --location user
or, as the default location is user anyway:
npm config set legacy-peer-deps true
global configuration (defalts to $PREFIX/etc/npmrc, see more)
npm config set legacy-peer-deps true --location global
or, as --global infers --location global
npm config set legacy-peer-deps true --global
For some projects, fixing dependencies may be non-trivial
In my case, a critical dependency we have a legacy version of wants to pull in webpack v3 (!) - but that's a build dependency of that project's.
The best solution on a short term basis is to use legacy-peer-deps as a hold over.
If you are in a pinch, you could also consider forking the dependency and adjusting its peer dependencies accordingly - them point your project to the fork.
You can install the packages using two ways it is showing this error
ERESOLVE unable to resolve dependency tree
Install the package using npm install and having --legacy-peer-deps
npm install --save --legacy-peer-deps
This is a combination of two commands
a. Set legacy-peer-deps true in npm config
npm config set legacy-peer-deps true
b. Now install packages using npm install
npm install
The problem seems to be that gf-kautomata-pipeline-ui is using Angular 9, while #angular/http requires Angular 7. (#angular/http was deprecated and eventually removed, and all its functionality was moved into #angular/common instead.)
See: https://www.npmjs.com/package/#angular/http
If you're running Angular 9, then
delete #angular/http from your package.json (You don't need it in Angular 9)
Make sure you have #angular/common in your package.json.
Run npm i.
If you're running Angular 7, then open up your package.json and check to make sure all of your Angular packages are no higher than ^7.0.0. You may also need remove gf-kautomata-pipeline-ui, or contact the author of gf-kautomata-pipeline-ui and find out if the library is compatible with Angular 7.
This works for me:
npm install --save --legacy-peer-deps
In my case, I started getting the error (below) after upgrading npm from version 6 to 7.
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency
tree
...
npm ERR! Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
In my case compiling with either --legacy-peer-deps or --force flags resulted in a useless bundle.
So I tried deleting the node_modules, package-lock.json, and bundle using yarn install. This generated a yarn.lock file and created package-lock.json that worked fine in subsequent npm runs.
P.S.: I am using the temporary workaround until npm 7 works fine with my project: after that, I will delete yarn.lock, package-lock.json and folder node_modules, and recompile with npm
rm -rf node_modules
rm package-lock.json
yarn install
# Generates a yarn.lock file and a new package-lock.json
# Continue with npm
npm start
I just update my Node.js and it works for me:
node -v
Output:
V xxxx
And:
sudo npm install -g n
(Use this command to install the stable node release.)
sudo n stable
If you have node_modules folder and package-lock.json file in your root directory then remove those:
rm -r node_modules
rm package-lock.json
Then run commands:
npm install --save --legacy-peer-deps
npm audit fix --force
Create .env file in the root directory and paste below code:
SKIP_PREFLIGHT_CHECK=true
Now, start your project:
npm start
I have faced this issue many times. At last I found a solution:
npm install react-native-paper --legacy-peer-deps
Use
npm install --legacy-peer-deps
This worked for me.
For this case, I was having the issue
ERESOLVE unable to resolve dependency tree
in an Angular 13 project that used some packages from a private npm feed in Azure DevOps.
To access this repository, I created an .npmrc file. Because of this, the npm install command would search all packages in my private repository and not in npm feed any more. The unable to resolve the dependency tree error happened because the npm install command could not find many of the packages that were hosted in the npm feed and not my private feed.
I found this amazing answer on how to scope packages.
Based on this, I made some changes:
In my library Package.json, update the name to have a scope name #mylib
"name": "#myLib/command-queue",
Build and publish this package to my private feed
In my client app (the one that uses this package), update the .npmrc file to use my private feed for packages in this scope only
#myLib:registry=https://pkgs.dev.azure.com/...
always-auth=true
Now, whenever I run the command npm install, if the package has the scope #myLib, it will look for it in my private feed, and use the npm feed for all other cases (i.e., #angular/...)
This is an example of my client app Package.json file:
"#angular/platform-browser-dynamic": "~13.3.0",
"#angular/router": "~13.3.0", <-- this comes from npm
"#myLib/jcg-command-queue": "^2.2.0", <-- This comes from my private feed
Also, with this change, there isn't any need to add --legacy-peer-deps to the npm install command any more.
We had the same issue resulting in the error bellow:
npm ERR! code ERESOLVE npm
ERR! ERESOLVE could not resolve npm
ERR!
npm ERR! While resolving: #angular/material-moment-adapter#12.1.4 npm
ERR! Found: #angular/material#12.0.6 npm ERR!
node_modules/#angular/material npm ERR! #angular/material#"~12.0.4"
from the root project
...
We use npm ci for clean install in Azure-Pipelines.
The issue was very often, that package.json and package-lock.json were not in sync anymore.
Solution to it was to execute npm install local and push the new package-lock.json.
As and additional hint we added a new task in the pipeline for additional informations if the the job fails.
- task: Npm#1
displayName: npm install
inputs:
command: custom
customCommand: ci
customRegistry: useNpmrc
# ##vso[task.logissue type=error] writes the text to the summary page (error-log).
- bash: echo "##vso[task.logissue type=error] If 'npm install' fails with 'ERESOLVE could not resolve', 'package.json' and 'package-lock.json' (needed for 'npm ci') may be out of sync. Run 'npm install' locally and push the new package-lock.json."
condition: failed() # Only execute on fail
displayName: npm install failed hint
Resetting package-lock.json works good for me all the time:
git checkout -- package-lock.json
Details:
Been experiencing this a lot when updating all packages of the legacy project - I highly don't recommend using npm audit fix nor npm i --force. Deleting the package-lock.json didn't work for me all the time as well. Rollback to the working version of package.json + package-lock.json and add packages turned out to be the safest and fastest variant for me.
Just in case, I did have similar behavior, when I tried either npm upgrade my current Angular 11.x based boilerplate from previous ng new or create new ng new abc based on Angular 12.x. I simply forgot to upgrade Angular CLI. So this npm install -g #angular/cli#latest solved my errors during ng new abc.
In my case I was having trouble with a #babel/core dependency, but I didn't want to use --force, because I was not sure about the consequences, so I went to https://www.npmjs.com/, looked for the package and replaced my old version with the newest one. That did the work.
This is an issue of Node.js version. Some latest versions of Node.js could show errors like these.
https://github.com/nvm-sh/nvm
I use NVM to manage Node.js versions on the system and use Node.js 12 to get past this error.
Command to change version:
nvm use 12
Downgrade Node.js to v14 works for me.
Use these commands:
source ~/.bash_profile
nvm use v14.16.1
npm install

TypeError: Cannot read property 'NormalModule' of undefined

I am working on a big project and I cannot run it anymore because of this error:
When I run npm run serve
ERROR TypeError: Cannot read property 'NormalModule' of undefined
TypeError: Cannot read property 'NormalModule' of undefined
at VueLoaderPlugin.apply (/Users/<user>/muso-ninjas/node_modules/vue-loader-v16/dist/pluginWebpack5.js:44:47)
at webpack (/Users/<user>/muso-ninjas/node_modules/#vue/cli-service/node_modules/webpack/lib/webpack.js:51:13)
at serve (/Users/<user>/muso-ninjas/node_modules/#vue/cli-service/lib/commands/serve.js:163:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Please help me because I am stuck and I would like to go with my project.
Try this first:
In your project root, run npm install. Maybe someone else on your project has changed/added a dependency, and pulling from your git repo got you the code that relies on this, but won't get you the dependency itself.
If that doesn't fix your issue, try this:
Remove the node_modules folder in your project root.
Update your Node.js version to the latest 16.x version.
2.1 Verify the update has worked by issuing node -v in the terminal.
Update your npm: Run npm i -g npm in the terminal.
3.1 Very the update has worked by issuing npm -v in the terminal.
Run npm install in your project's root folder.
If this doesn't fix your issue, you need to find help from someone else on your team.
As suggested in link from the first comment, I deleted node_modules, replaced the node-sass in package.json with "sass": "^1.26.5" and ran npm install but it didn't work.
Then I repeated the steps and removed package-lock.json as well.
This helped and the app was served properly
npm install webpack#4.39.3 --save

RN Expo issue - Something when wrong installing JavaScript dependencies. Check your npm logs. Continuing to initialize the app

I am using react native and Expo. I am unable to build new app because after I use expo init appName it shows the following error.
Heres the full message:
📦 Using npm to install packages. You can pass --yarn to use Yarn instead.
√ Downloaded and extracted project files.
× Something when wrong installing JavaScript dependencies. Check your npm logs. Continuing to initialize the app.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd Scanner
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
I tried multiple times to create a blank project, also tried npm install to install failed/not downloaded libraries and continue after failure but it showed another error:
npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! zlib: unexpected end of file
also tried npm cache verify that showed cache is ok Content verified: 3562 (252580364 bytes).
So, How can I solve this issue?
Problems related to npm installation are very common If you do any mistake in early installation, but is avoided. Learn more about npm tree.
Steps worked for me are :
npm cache clean --force
npm cache verify
npm -g uninstall expo-cli --save
npm install expo-cli --global
expo init app-name
cd app-name
npm start
Always run as administrator if working on Windows and in root directory.
The solutions above didn't work for me but if you use 'npm install' in the directory of the app you get a clue that you shuold try 'npm install --force'
err message
You should have all these files folders and files at the start of the project otherwise not all the dependencies have been installed which is why we were getting the problem.folder structure
After you have added --force to npm install you have all the dependencies installed. Now you can run the app with npm start.
Unfortunately, all the solutions described above didn't work on my machine...
Here is my latest solution for this problem...
This worked 100% on my machine...
Use npm i -g expo-cli
This will automatically add the required packages and also remove the unnecessary ones.
Yes, surely, you don't need to uninstall and re-install it again.
Just follow my steps.
And, you can create your expo project using expo init.
I hope my solution will help you out from this annoying problem....
I just did npm install and it worked for me, but I had do that every time I create a new expo project.
I also encountered this problem, and finally found that it was the problem of react native cli,I installed the latest version of react native cli,Expo is back to normal
This Error is regarding to the git account. expos need a git account to setup react native project
If you are using windows you need to install git in your local PC
after that open your Terminal and type this command
git config --global user.name "your_username"
git config --global user.email "your_email_address#example.com"
after that clone any github project to your local computer. it will ask to login to Github
after all these steps try expo init <projectname>
The simple way to settle that error is by using "expo-cli init app-name" instead of "expo init app-name".
I tried and worked perfectly for me. Hope it will help you guys.
i have faced a similar problem and running yarn set version 1.22.1 fix it
Run the Command Prompt as an administrator. And run the following command:
npx create-expo-app AwesomeProject

How I can skip installing optional dependencies by 'npm ci'?

How I can skip installing optional dependencies from package-lock.json by npm ci?
You can use npm ci --no-optional .
If npm still installs the optional package. Then try after removing package.lock.json and run the command again.
There was an error in NPM's implementation of npm ci --no-optional. It has been fixed in versions > 6.13.3 - maybe earlier versions as well, but I can only vouch for 6.13.4 and up.
I was facing this issue with CI workflow script and even "--no-optional" was not working
npm ci --no-optional
The above command only worked when I added the optional package as
"optionalDependencies": {
"fsevents": "^2.3.2"
}
in the package.json file
It's not a proper solution, rather an ugly one, but it helped me out. It looks like npm ci --no-optional doesn't work and probably never worked. But at the same time flag --production works. And if we afford mutating package.json (e.g. in a docker container) then...
So I wrote a simple script that:
reads package.json content
Object.assign(cfg.dependencies, cfg.devDependencies)
delete cfg.devDependencies
overwrites the initial package.json
So finally we have:
dependencies contains both normal & dev dependencies
devDependencies section is empty
optionalDependencies are intact
And when we run npm ci --production we got what we want - no optional dependencies (in my case cypress). Due to the fact that all these steps are performed inside of a docker container we can mutate package.json.
But I'm not sure that it'll help you too.
In order to make npm ci --no-optional skip/ignore an optional pacakge, it's important to understand how npm intracts with package.json and pacakge-lock.json.
npm install --no-optional (is only effective if pacakge-lock.json doesn't exists otherwise it would ignore --no-optional)*
npm ci --no-optional is only effective if pakcage-lock.json was already created with npm install --no-optional**.
* This means if you want to make an already installed package an optional, you can would have to
Add it "optionalDependencies": either manulally or through npm install pacakge-name --save-optional
Delete the pacakge-lock.json.
then run rm -rf node_modules/
Lastly run npm install --no-optional
Add this point npm ci --no-optional isn't suppose to install it.
** TIP: you could debug if a certian package is assigned as optional by running npm ls package-name
Note: This one the reason why its recommended to keep trak pacakge-lock.json with git repo of the project.

webpack is not recognized as a internal or external command,operable program or batch file

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.