Error cannot find module webpack cli package json

I want to make es6 into my project so I used this tutorial this tutorial
and when i try to write ‘webpack’ in cmd I get the error

    Done in 8.99s.
{ Error: Cannot find module 'webpack-cli'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at runCommand.then.result (C:UsersadirzAppDataRoamingnpmnode_moduleswebpackbinwebpack.js:62:14)
    at process._tickCallback (internal/process/next_tick.js:109:7) code: 'MODULE_NOT_FOUND' }

package.json

   {
  "name": "functions",
  "scripts": {
    "build": "tsc",
    "serve": "npm run build && firebase serve --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "~5.12.0",
    "firebase-functions": "^1.0.1"
  },
  "devDependencies": {
    "ts-loader": "^4.2.0",
    "typescript": "^2.5.3",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-node-externals": "^1.7.2"
  },
  "private": true
}

my folder structure

Webpack is a powerful static module bundler that treats all files and assets as modules. Under the hood, it relies on a dependency graph to describe how modules relate to each other using references between files. Then, it uses that graph to “package” multiple JavaScript files into one.

Webpack’s ability to statically traverse all modules allows it to build a graph of all the code, which it then uses to generate a single bundle or several bundles of code. “Webpack’s “static” mode means that it doesn’t execute your source code, but instead stitches modules and their dependencies together into a bundle that you can include in your HTML files.

Beginners who are trying to set up their system for developing modern JavaScript applications often encounter “Cannot find module webpack” error. This article is going to show you several ways to fix the “Cannot find module webpack” in common scenarios.

“Cannot find module webpack” may be one of the most common error when it comes to developing JavaScript programs. What we’re referring to are error messages that has something like “Error: Cannot find module ‘webpack-cli/package.json’” or “Error: Cannot find module ‘webpack/bin/config-yargs’”.

The specific error messages may varies but the reason behind them are the same : Your system cannot recognize webpack in where it supposed to be. It can be your NODE_ENV is not set right, or you’re using a legacy command syntax which webpack deprecated. Read on to find a proper solution for each causes.

Reinstall all modules

There are cases that “Cannot find module webpack” error pops up after a npm install package_name process has been suddenly interrupted.

In this case, you should remove the node_modules directory, package-lock.json (not the package.json), /dist folder. After that, run the following commands to clean npm cache and recreate node_modules.

npm cache clean --force
npm install

Finally, reinstall all modules from scratch, then the error should be gone.

Use global webpack

One of the simplest method to quickly fix “Cannot find module webpack” error is to link your project to the globally installed version of webpack, instead of the local one. You can do that by running the following command.

npm link webpack

In case you didn’t have webpack installed globally, here’s the command to do that.

npm i -g webpack

Set NODE_ENV to development

If your NODE_ENV is not set right, packages managers like yarn might not be able to get your devDependencies installed.

In this case, you can try setting NODE_ENV to development and see if “Cannot find module webpack” error goes away.

In order to do that on Windows, open up the Command Prompt and run set NODE_ENV=development. In Linux, you can simply run a similar command to set NODE_ENV to development for the current bash session :

export NODE_ENV=development
Code language: JavaScript (javascript)

If you want to avoid running the command above over and over again, add it to one of the following files so that Bash can load it at startup.

• ~/.bash_profile
• ~/.bashrc
• ~/.profile

Let’s suppose we are adding the line to ~/.bash_profile, we would run the following commands in a terminal window.

echo export NODE_ENV=development >> ~/.bash_profile
source ~/.bash_profile
Code language: PHP (php)

Install webpack-cli

If your error messages contains webpack-cli, that means you’re missing the Command Line Interface of Webpack instead of Webpack itself. Install webpack-cli system-wide by running the command below.

npm install webpack-cli -g

Check your command syntax

If you’re using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve in your package.json, so your start script may look like below.

"serve": "webpack serve --config config/webpack.dev.js --progress"
Code language: JavaScript (javascript)

For webpack-cli 3.x:

"scripts": {
    "start:dev": "webpack-dev-server"
    }
Code language: JavaScript (javascript)

For webpack-cli 4.x:

"scripts": {
    "start:dev": "webpack serve"
    }
Code language: JavaScript (javascript)

Fore more information, check out the official webpack migration tutorial and webpack-dev-server.

We hope that the information above helps you successfully fixed “Cannot find module webpack” error. You may be insterested in our other troubleshooting tutorial such as fix npm: command not found, fix “nodemon: command not found” or fix JSON’s end of file expected

Cannot find module webpack – possible fixes

Webpack is a powerful static module bundler that treats all files and assets as modules. Under the hood, it relies on a dependency graph to describe how modules relate to each other using references between files. Then, it uses that graph to “package” multiple JavaScript files into one.

Webpack’s ability to statically traverse all modules allows it to build a graph of all the code, which it then uses to generate a single bundle or several bundles of code. “Webpack’s “static” mode means that it doesn’t execute your source code, but instead stitches modules and their dependencies together into a bundle that you can include in your HTML files.

Beginners who are trying to set up their system for developing modern JavaScript applications often encounter “Cannot find module webpack” error. This article is going to show you several ways to fix the “Cannot find module webpack” in common scenarios.

“Cannot find module webpack” error

“Cannot find module webpack” may be one of the most common error when it comes to developing JavaScript programs. What we’re referring to are error messages that has something like “Error: Cannot find module ‘webpack-cli/package.json’” or “Error: Cannot find module ‘webpack/bin/config-yargs’”.

The specific error messages may varies but the reason behind them are the same : Your system cannot recognize webpack in where it supposed to be. It can be your NODE_ENV is not set right, or you’re using a legacy command syntax which webpack deprecated. Read on to find a proper solution for each causes.

Reinstall all modules

There are cases that “Cannot find module webpack” error pops up after a npm install package_name process has been suddenly interrupted.

In this case, you should remove the node_modules directory, package-lock.json (not the package.json), /dist folder. After that, run the following commands to clean npm cache and recreate node_modules .

Finally, reinstall all modules from scratch, then the error should be gone.

Use global webpack

One of the simplest method to quickly fix “Cannot find module webpack” error is to link your project to the globally installed version of webpack, instead of the local one. You can do that by running the following command.

In case you didn’t have webpack installed globally, here’s the command to do that.

Set NODE_ENV to development

If your NODE_ENV is not set right, packages managers like yarn might not be able to get your devDependencies installed.

In this case, you can try setting NODE_ENV to development and see if “Cannot find module webpack” error goes away.

In order to do that on Windows, open up the Command Prompt and run set NODE_ENV=development . In Linux, you can simply run a similar command to set NODE_ENV to development for the current bash session :

If you want to avoid running the command above over and over again, add it to one of the following files so that Bash can load it at startup.

Let’s suppose we are adding the line to

/.bash_profile , we would run the following commands in a terminal window.

Install webpack-cli

If your error messages contains webpack-cli , that means you’re missing the Command Line Interface of Webpack instead of Webpack itself. Install webpack-cli system-wide by running the command below.

Check your command syntax

If you’re using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve in your package.json, so your start script may look like below.

For webpack-cli 3.x :

For webpack-cli 4.x :

Fore more information, check out the official webpack migration tutorial and webpack-dev-server.

We hope that the information above helps you successfully fixed “Cannot find module webpack” error. You may be insterested in our other troubleshooting tutorial such as fix npm: command not found, fix “nodemon: command not found” or fix JSON’s end of file expected

Источник

Error: Cannot find module ‘../package.json’ #5427

module.js:471
throw err;
^

Error: Cannot find module ‘../package.json’
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/vinyuan/code/uculture/webpack-demo3/node_modules/.bin/webpack:17:22)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)

npm ERR! Darwin 16.5.0
npm ERR! argv «/usr/local/bin/node» «/usr/local/bin/npm» «run» «build»
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! webpack-demo2@1.0.0 build: webpack
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-demo2@1.0.0 build script ‘webpack’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webpack-demo2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs webpack-demo2
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls webpack-demo2
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/vinyuan/code/uculture/webpack-demo3/npm-debug.log

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

The text was updated successfully, but these errors were encountered:

Источник

Cannot run webpack-cli after install #191

After trying to run «webpack-cli» for config migrating, I got this error output.
macOS Sierra 10.12.6
npm v5.4.2
node v8.7.0 (installed via nvm)
webpack-cli v1.3.9

The text was updated successfully, but these errors were encountered:

Hi @dphov, which version of webpack-cli did you install? The latest? (1.3.9)

Same error here

Looks like a bad release?

Also why is the dist/ folder committed at all? Easy win to remove it, and ignore the source code from the published package with a .npmignore

Yep, bad rebase indeed. We need a solid build step, so if someone want’s to fix prepublish and creating a dist build that actually works, that would be great. There’s a PR for it, but we need to only create the dist folder, and flow-remove-types doesn’t seem to work with prepublish . Would be super-humble for a PR to fix this

FWIW, the 1.9 version should actually work, could you do a deep dive into node_modules in global and try to run webpack with something like node

Looks like last five* versions are hosed too?

same output for yarn add -D webpack-cli@1.3.7

This succeeded: yarn add -D webpack-cli@1.3.5 , but then.

Same for yarn add -D webpack-cli@1.3.4 .

Am I missing something? Have the last 5+ releases not worked?

correct, was planning to bump to 1.4.0 once this got fixed

1.3.4 and 1.3.9 should work, I’m interested in the trace for 1.3.9

Install for 1.3.9 works but error is in the first post

Do npm install -g webpack-cli , it should have 1.4.0 now, reverted some things, as @ematipico did a PR for flow that made the build broken, tried to fix it by adding compilation and stuff, so that we could support v4 of node, will do some more investigating to make sure it works 100%. Sorry for the bug you guys had, having a hard time finding time for open source atm, as I’m working + full time student 🙁

As mentioned earlier, would be super-awesome if someone made a PR that fixes distribution and flow-compilation

Closing this per now, feel free to open a new issue if something comes up, I’m available for questions or elaboration anytime ❤️

still happening:
Error: Cannot find module ‘./utils/webpackOptionsSchema.json’
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/usr/local/lib/node_modules/webpack-cli/dist/migrate.js:10:30)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
timo$ webpack-cli —version
1.4.4

Try reinstalling to the newest version

Install the latest version @anisart

@ev1stensberg but how? I install it via

@anisart flow-remove-types doesn’t want to copy over json files, sadly 🙁

Sorry for the errors you were getting, try npm install -g webpack-cli@1.4.5 or npm update -g webpack-cli

I’m having this error when I try to run foreman:

I am having the following error:

test-react-full@1.0.0 build /Users/juangarcia/projects/testReactFull
webpack-cli

internal/modules/cjs/loader.js:596
throw err;
^

Error: Cannot find module ‘webpack/schemas/WebpackOptions.json’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (/Users/juangarcia/projects/testReactFull/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object. (/Users/juangarcia/projects/testReactFull/node_modules/webpack-cli/bin/config-yargs.js:1:85)
at Module._compile (/Users/juangarcia/projects/testReactFull/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)

webpack-cli version 2.1.4
npm I used 6.1.0
node version v10.2.1

I update and reinstall for a new version of webpack(3.12.0) and solve.

webpack-cli migrate ./webpack.config.js

I was also having same problem, I fixed it by running the below command.
npm install webpack-cli@2.1.3 —save

Run webpack-cli v.3.0.1 and above to fix this

Источник

After running npm start I get «Error: Cannot find module ‘webpack/schemas/WebpackOptions.json’» #1404

Setup

• Operating System: Mac OS 10.13.4
• Node Version: v10.1.0
• NPM Version: v6
• webpack Version: v1.31.1
• webpack-dev-server Version: 3.1.4

After running npm start I get the following:

The text was updated successfully, but these errors were encountered:

You possibly switched to the webpack-cli loader?

Try moving webpack itself to your local env:

That as well as moving from webpack-dev-server from 2 > 3. Switched back to 2 and that seemed to work.

webpack-dev-server@3 is not compatobility with webpack@1 , when you run npm/yarn install you should see this messages

finally how you solve this problem? i have this probleam

I need solution too

I’ve solved it, Try chang the webpack-dev-server plugin version

In my case this stackoverflow answer helped me:
https://stackoverflow.com/questions/50374305/cannot-find-module-webpack-schemas-webpackoptions-json-when-trying-to-instal
just run npm install webpack@4.8.2 then npm install . As others have said, it’s a versioning issue.

doing npm install webpack-cli worked for me

I am trying to run webpack server in development mode.I am getting the errors as below

Error: Cannot find module ‘webpack-cli/bin/config-yargs’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
at Function.Module._load (internal/modules/cjs/loader.js:580:25)
at Module.require (internal/modules/cjs/loader.js:711:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object. (/Users//Desktop/workspace/frontend/src/node_modules/webpack-dev-
server/bin/webpack-dev-server.js:84:1)
at Module._compile (internal/modules/cjs/loader.js:805:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
at Module.load (internal/modules/cjs/loader.js:672:32)
at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
at Function.Module._load (internal/modules/cjs/loader.js:604:3)

The package version that I am using are as follows:
«webpack»: «^4.12.0»,
webpack-dev-server»: «^3.1.4»,
«webpack-cli»: «^3.3.1»,

I also tried to navigate to the path «/node_modules/webpack-cli/bin/config-yargs» ,
seems there is no folder named as config-yargs.
Can anyone help on this?

Did we find any solution for this?

webpack-cli and webpack-dev-server should be same major version. So open you package.json and make sure they point to same major version 3

Unable to fix it.
An unhandled exception occurred: Cannot find module ‘webpack’

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

After running npm start I get «Error: Cannot find module ‘webpack/schemas/WebpackOptions.json’» #1404

Setup

• Operating System: Mac OS 10.13.4
• Node Version: v10.1.0
• NPM Version: v6
• webpack Version: v1.31.1
• webpack-dev-server Version: 3.1.4

After running npm start I get the following:

The text was updated successfully, but these errors were encountered:

You possibly switched to the webpack-cli loader?

Try moving webpack itself to your local env:

That as well as moving from webpack-dev-server from 2 > 3. Switched back to 2 and that seemed to work.

webpack-dev-server@3 is not compatobility with webpack@1 , when you run npm/yarn install you should see this messages

finally how you solve this problem? i have this probleam

I need solution too

I’ve solved it, Try chang the webpack-dev-server plugin version

In my case this stackoverflow answer helped me:
https://stackoverflow.com/questions/50374305/cannot-find-module-webpack-schemas-webpackoptions-json-when-trying-to-instal
just run npm install webpack@4.8.2 then npm install . As others have said, it’s a versioning issue.

doing npm install webpack-cli worked for me

I am trying to run webpack server in development mode.I am getting the errors as below

Error: Cannot find module ‘webpack-cli/bin/config-yargs’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
at Function.Module._load (internal/modules/cjs/loader.js:580:25)
at Module.require (internal/modules/cjs/loader.js:711:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object. (/Users//Desktop/workspace/frontend/src/node_modules/webpack-dev-
server/bin/webpack-dev-server.js:84:1)
at Module._compile (internal/modules/cjs/loader.js:805:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
at Module.load (internal/modules/cjs/loader.js:672:32)
at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
at Function.Module._load (internal/modules/cjs/loader.js:604:3)

The package version that I am using are as follows:
«webpack»: «^4.12.0»,
webpack-dev-server»: «^3.1.4»,
«webpack-cli»: «^3.3.1»,

I also tried to navigate to the path «/node_modules/webpack-cli/bin/config-yargs» ,
seems there is no folder named as config-yargs.
Can anyone help on this?

Did we find any solution for this?

webpack-cli and webpack-dev-server should be same major version. So open you package.json and make sure they point to same major version 3

Unable to fix it.
An unhandled exception occurred: Cannot find module ‘webpack’

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

To fix the error “cannot find module ‘webpack’”, you should have a basic knowledge of NPM. So before we get into the main section, let’s learn more about NPMM and webpack.

What is NPM, and what is webpack?

NPM was born with Nodejs. It is a package management tool in JavaScript. It helps us to install and update the necessary packages for the project quickly.

Webpack is a module bundler – that helps us to pack resource files into organized files. Webpack’s advantages include: bundling JS and CSS files into a single file, minifying assets, optimizing the image, svg…

When does the “cannot find module ‘webpack’” error occur?

To use the webpack library, make sure you install it from npm. You will get an error message “Cannot find module ‘webpack’” if you try to use webpack before installation.

Another reason is that you have installed webpack globally but don’t link it to the project folder.

In the example below, there is no webpack package in the package.json file, but in the index.js file, we try to access webpack, and so we get the error “cannot find module ‘webpack’”.

Package.json:

{
	// ...
	"dependencies": {
		"date-fns": "^2.29.3",
		"express": "^4.18.2",
		"nodemon": "^2.0.20"
	}
}

Index.js:

// Require webpack but not installed
const webpack = require("webpack");

// Try to access webpack
console.log(webpack.version);

Output:

Error: Cannot find module 'webpack'

How to fix this problem?

Install webpack and webpack-cli before using them

To fix this problem, you must install webpack and webpack-CLI before using them by opening a terminal in the project directory and typing the following command:

npm install webpack webpack-cli --save-dev

The –save-dev suffix will save our packages to devDependencies instead of dependencies.

Next, check the package.json file:

{
	// ...
	"dependencies": {
		"date-fns": "^2.29.3",
		"express": "^4.18.2",
		"nodemon": "^2.0.20"
	},
    
	"devDependencies": {
		"webpack": "^5.74.0",
		"webpack-cli": "^4.10.0"
	}
}

If you see the webpack and webpack-cli packages in the devDependencies, it proves you have successfully installed them. Now you can use webpack comfortably.

Let’s try the first example again, but this time we have installed webpack.

Index.js:

// Require webpack
const webpack = require("webpack");

// Access the version to check if we can use webpack
console.log(webpack.version);

Output:

5.74.0

Link webpack to project folder

If you have installed webpack in a global environment using the command line:

npm install --global webpack

But when using webpack in the project directory, you still get the error message: cannot find module ‘webpack’. Maybe you have not linked webpack to the project directory.

Open a terminal in the project directory and type the following command:

npm link webpack

Next, check the node_modules folder. You will see on the right of the webpack folder there is an arrow symbol like the image below. It proves you have successfully linked.

Now you can use webpack anywhere in your project directory.

Clear cache if webpack and webpack-cli are installed

If in the node_modules folder and your package.json file, the webpack and webpack-cli packages already exist, but you still get the error “cannot find module ‘webpack’”. Just clear the npm cache.

First, delete the node_modules folder and the package-lock.js file. Then run the following commands:

npm cache clean --force

npm install

Once installed, the node_modules folder and the package_lock.json file will reappear. Like this:

Now, check the node_modules folder. If you see two folders: webpack and webpack-cli, you have installed them successfully.

From now on, you can use webpack and never worry about the “cannot find module ‘webpack’” error again.

Summary

We have fixed the error “cannot find module ‘webpack’” together. We hope in the future if you encounter the same error, you can solve it easily by yourself.

Thanks for reading!

Maybe you are interested:

• How to solve “TypeError: find is not a function” in JavaScript
• “Cannot Read Property ‘FindIndex’ Of Undefined” In JavaScript – How To Solve It?
• “Cannot find module ‘lodash’” in Javascript
• “Cannot destructure Property of Undefined” in JavaScript