Since recently got this error when trying to run npm run build saying webpack could not be found in the mini-css-extract-plugin. I can't figure out what I've might have changed to cause it.
I've created a release branch recently, but I don't have a lot of changes (in the package.json) compared the master branch where the build still works. However a few weeks ago (before my holidays) it still worked and I can't get my finger on the problem.
Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (D:\EnviDat\Frontend\envidat_frontend\node_modules\mini-css-extract-plugin\dist\index.js:8:39)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (D:\EnviDat\Frontend\envidat_frontend\node_modules\mini-css-extract-plugin\dist\cjs.js:3:18)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
I've have tried install the dependencies in the node_modules\mini-css-extract-plugin folder manually via npm install, but then I've just got other dependencies which couldn't be loaded. When installing the them.
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Failed to load plugin import: Cannot find module 'eslint-plugin-import'
Referenced from: D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\@vue\eslint-config-airbnb\node_modules\eslint-config-airbnb-base\index.js
Referenced from: D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\@vue\eslint-config-airbnb\index.js
Referenced from: D:\EnviDat\Frontend_develop\envidat_frontend\.eslintrc.js
at PoolWorker.fromErrorObj (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\thread-loader\dist\WorkerPool.js:262:12)
at D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\thread-loader\dist\WorkerPool.js:204:29
at mapSeries (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\thread-loader\node_modules\neo-async\async.js:3625:14)
at Function.Module._resolveFilename (module.js:538:15)
at Function.resolve (internal/module.js:18:19)
at Plugins.load (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\plugins.js:104:29)
at Array.forEach (<anonymous>)
at Plugins.loadAll (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\plugins.js:165:21)
at loadFromDisk (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\config-file.js:529:35)
at load (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\config-file.js:587:20)
at configExtends.reduceRight (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\config-file.js:453:36)
at Array.reduceRight (<anonymous>)
at applyExtends (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\config-file.js:431:26)
@ multi ./src/main.js
At which point I'm lost, I could figure out anything online, so I've reinstall all the node_modules, still the same result. Also I've tried to go a clean install with npm ci, still the same problem.
The dependencies in the package.json:
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"core-js": "^2.6.5",
"leaflet": "^1.5.1",
"leaflet.gridlayer.googlemutant": "^0.7.0",
"m-markdown-preview": "^1.0.0",
"material-design-icons-iconfont": "*",
"seedrandom": "^2.4.3",
"skeleton-placeholder": "^1.0.0",
"ssri": "^5.3.0",
"vue": "^2.6.10",
"vue-infinite-loading": "^2.4.4",
"vue-router": "^3.0.3",
"vue2-filters": "^0.7.0",
"vuetify": "^1.5.5",
"vuex": "^3.0.1",
"vuex-localstorage": "^1.0.0"
},
"devDependencies": {
"@mdi/font": "^3.8.95",
"@storybook/addon-actions": "^4.1.0 || ^5.0.0",
"@storybook/addon-knobs": "^4.1.0 || ^5.0.0",
"@storybook/addon-links": "^4.1.0 || ^5.0.0",
"@storybook/addon-notes": "^4.1.0 || ^5.0.0",
"@storybook/addon-viewport": "^5.1.9",
"@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-plugin-eslint": "^3.9.2",
"@vue/cli-service": "^3.9.0",
"@vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"css-loader": "^3.1.0",
"eslint": "^5.16.0",
"eslint-import-resolver-babel-module": "^5.1.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-storybook": "^0.6.1",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.0.5"
},
The the full package.json is here: https://github.com/EnviDat/envidat_frontend/blob/release/Navigation_integration/package.json
And the vue.config.js:
module.exports = {
publicPath: './',
assetsDir: './static',
runtimeCompiler: true,
css: {
modules: false,
sourceMap: true,
},
pluginOptions: {
storybook: {
allowedPlugins: ['define'],
},
},
};
So I removed package-lock.json and npm told me about the missing dependencies. I installed these. When I ran the build it wanted some more deps regarding eslint-loader.
In summary:
npm install --save-dev webpack html-webpack-plugin typescript vue-loader babel-loader eslint-plugin-import eslint-import-resolver-webpack
and
npm run build
yielded
DONE Build complete. The dist directory is ready to be deployed.
This does no really answer the question what exactly is going on here though :/