With the latest 1.8.0 release we’re getting following error:
[webpack-cli] Failed to load 'testwebpack.config.js' config
[webpack-cli] Error: Cannot find module 'eslint-webpack-plugin'
With "@symfony/webpack-encore": "1.7.1", it works out of the box.
It looks like when the dependency "eslint-webpack-plugin": "^3.1.1" in package.json is missing it fails, eventho the WebpackConfig.useEslintLoader and WebpackConfig.useEslintPlugin is set to false by default and never touched.
I created locally a quick test case and stripped everything (sass, react, …) out of it to ensure that it’s failing with the bare minimum
package.json
{
"name": "test",
"license": "GPL-2.0-or-later",
"author": {
"name": "Christian Leucht",
"email": "c.leucht@inpsyde.com",
"role": "Developer"
},
"devDependencies": {
"@symfony/webpack-encore": "^1.8.0",
"ts-loader": "^9.0.0",
"typescript": "^3.3.4000"
}
}
webpack.config.js
const Encore = require('@symfony/webpack-encore'); Encore .setOutputPath('assets/') .setPublicPath('/assets/') .addEntry('test', './resources/ts/test.ts') .enableTypeScriptLoader() .enableSingleRuntimeChunk() ; module.exports = Encore.getWebpackConfig();
tsconfig.json
[!] Not executed, but in case you want to change it to "@symfony/webpack-encore": "1.7.1", for testing:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [
"es5",
"es6",
"dom"
],
"moduleResolution": "node",
"declaration": false,
"esModuleInterop": true,
"noImplicitAny": false,
"sourceMap": true,
"noLib": false,
"suppressImplicitAnyIndexErrors": true
},
"compileOnSave": false,
"exclude": [
"node_modules",
"vendor"
]
}
Additional infos
>yarn list --pattern webpack-encore
yarn list v1.22.15
└─ @symfony/webpack-encore@1.8.0
Stack
Here’s the error stack (cleaned up the path):
Require stack:
- testnode_modules@symfonywebpack-encorelibpluginseslint.js
- testnode_modules@symfonywebpack-encorelibconfig-generator.js
- testnode_modules@symfonywebpack-encoreindex.js
- testwebpack.config.js
- testnode_moduleswebpack-clilibwebpack-cli.js
- testnode_moduleswebpack-clilibbootstrap.js
- testnode_moduleswebpack-clibincli.js
- testnode_moduleswebpackbinwebpack.js
- testnode_modules@symfonywebpack-encorebinencore.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (testnode_modules@symfonywebpack-encorelibpluginseslint.js:15:22)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
'test\node_modules\webpack-cli\lib\webpack-cli.js',
'test\node_modules\webpack-cli\lib\bootstrap.js',
'test\node_modules\webpack-cli\bin\cli.js',
'test\node_modules\webpack\bin\webpack.js',
'test\node_modules\@symfony\webpack-encore\bin\encore.js'
]
}
I’m trying to use Webpack, ESLint and Flow type altogether. But, when I start webpack-dev-server I get the error message below. The weird thing is that eslint-config-flowtype is not even a module in NPM. Has someone encountered this issue before? Thanks in advance!
ERROR in ./src/index.jsx
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Cannot find module 'eslint-config-flowtype'
Referenced from: /Users/crs/code/my-project/.eslintrc.json
at ModuleResolver.resolve (/Users/crs/code/react-builerplate/node_modules/eslint/lib/util/module-resolver.js:74:19)
at resolve (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:479:28)
at load (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:551:26)
at configExtends.reduceRight (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:425:36)
at Array.reduceRight (<anonymous>)
at applyExtends (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:403:26)
at loadFromDisk (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:523:22)
at Object.load (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config/config-file.js:559:20)
at Config.getLocalConfigHierarchy (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config.js:227:44)
at Config.getConfigHierarchy (/Users/crs/code/react-builerplate/node_modules/eslint/lib/config.js:179:43)
@ multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.jsx
Below are all my project’s dependencies:
"dependencies": {
"axios": "0.16.1",
"babel-plugin-dynamic-import-webpack": "1.0.1",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-register": "6.24.1",
"compression": "1.6.2",
"cors": "2.8.3",
"express": "4.15.3",
"lodash": "4.17.4",
"preact": "8.1.0",
"preact-compat": "3.16.0",
"prop-types": "^15.6.1",
"prop-types-extra": "^1.1.0",
"react": "^16.4.0",
"react-addons-perf": "^15.4.2",
"react-dom": "^16.4.0",
"react-hot-loader": "3.0.0-beta.6",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"styled-components": "^3.3.2",
"webpack": "^4.11.1",
"webpack-dev-middleware": "1.10.2",
"webpack-hot-middleware": "2.18.0"
},
"devDependencies": {
"babel-core": "6.24.1",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-plugin-dynamic-import-node": "1.0.2",
"babel-plugin-react-flow-props-to-prop-types": "^0.15.0",
"babel-plugin-syntax-dynamic-import": "6.18.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "6.24.1",
"babel-preset-env": "1.5.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "6.24.1",
"enzyme": "2.8.2",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-config-react": "1.1.7",
"eslint-loader": "^2.0.0",
"eslint-plugin-flow": "2.29.1",
"eslint-plugin-flowtype": "^2.49.3",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.1.0",
"flow-bin": "^0.74.0",
"husky": "^0.14.3",
"jest": "20.0.4",
"jest-serializer-enzyme": "1.0.0",
"lint-staged": "^7.1.3",
"moxios": "0.4.0",
"nodemon": "1.11.0",
"prettier": "^1.13.5",
"prettier-eslint": "^8.8.1",
"react-test-renderer": "15.5.4",
"webpack-cli": "^3.0.3",
"webpack-dev-server": "^3.1.4",
"webpack-serve": "^1.0.3"
}
.eslintrc.json
{
"parser": "babel-eslint",
"extends": [
"flowtype",
"plugin:flowtype/recommended",
"airbnb",
"prettier",
"prettier/react"
],
"plugins": [
"prettier"
],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"rules": {
"prettier/prettier": "error",
"flowtype/boolean-style": [
2,
"boolean"
],
"flowtype/define-flow-type": 1,
"flowtype/delimiter-dangle": [
2,
"never"
],
"flowtype/generic-spacing": [
2,
"never"
],
"flowtype/no-primitive-constructor-types": 2,
"flowtype/no-types-missing-file-annotation": 2,
"flowtype/no-weak-types": 2,
"flowtype/object-type-delimiter": [
2,
"comma"
],
"flowtype/require-parameter-type": 2,
"flowtype/require-return-type": [
2,
"always",
{
"annotateUndefined": "never"
}
],
"flowtype/require-valid-file-annotation": 2,
"flowtype/semi": [
2,
"always"
],
"flowtype/space-after-type-colon": [
2,
"always"
],
"flowtype/space-before-generic-bracket": [
2,
"never"
],
"flowtype/space-before-type-colon": [
2,
"never"
],
"flowtype/type-id-match": [
2,
"^([A-Z][a-z0-9]+)+Type$"
],
"flowtype/union-intersection-spacing": [
2,
"always"
],
"flowtype/use-flow-type": 1,
"flowtype/valid-syntax": 1
},
"settings": {
"flowtype": {
"onlyFilesWithFlowAnnotation": false
}
}
}
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 :
Code language: JavaScript (javascript)
export NODE_ENV=development
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.
Code language: PHP (php)
echo export NODE_ENV=development >> ~/.bash_profile source ~/.bash_profile
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.
Code language: JavaScript (javascript)
"serve": "webpack serve --config config/webpack.dev.js --progress"
For webpack-cli 3.x:
Code language: JavaScript (javascript)
"scripts": { "start:dev": "webpack-dev-server" }
For webpack-cli 4.x:
Code language: JavaScript (javascript)
"scripts": { "start:dev": "webpack serve" }
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