array-explorer icon indicating copy to clipboard operation
array-explorer copied to clipboard

Error due to bumping webpack-dev-server from 2.11.3 to 3.1.11

Open kabbagepatch opened this issue 6 years ago • 1 comments

A PR (https://github.com/sdras/array-explorer/pull/97) was recently merged where we bumped the webpack-dev-server version from 2.11.3 to 3.1.11 This seems to cause some issues. When running npm run dev I get the error

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
module.js:538
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/km047841/myProjects/WebDev/array-explorer/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:1)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)

Even after installing webpack-cli, I still get the error

module.js:538
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/km047841/myProjects/WebDev/array-explorer/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:1)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)

When I rolled back to webpack-dev-server 2.11.3, the error isn't there anymore. I'm no webpack expert, but I imagine it has to do with some changes needed in the webpack config for the latest webpack-dev-server. Maybe even webpack 4. I'll investigate more. Maybe use this as a way to learn about webpack, but obviously, if someone else/Sarah knows the solution or can figure it out quicker, feel free to fix it :)

kabbagepatch avatar Nov 24 '19 00:11 kabbagepatch

Update on this: I got the dev build (npm run dev) working by uplifting webpack to v4, webpack-dev-server to v3.10, vue-loader to v14, css-loader to v3 and html-webpack-plugin to v3, and installing mini-css-extract-plugin to replace extract-text-webpack-plugin But now the production build (npm run build) is broken due to changes in webpack v4 that deprecated plugins that are being used in the prod config. Gonna work on that next at some point. Those seem a bit more complicated

My fork: https://github.com/kavisherlock/array-explorer/tree/webpackUplift

kabbagepatch avatar Jan 19 '20 20:01 kabbagepatch