sdras / array-explorer

⚡️ A resource to help figure out what JavaScript array method would be best to use at any given time

Home Page:https://arrayexplorer.netlify.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

kavisherlock opened this issue · comments

A PR (#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 :)

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