Browser will not Launch on npm start with webpack Related to [email protected] and [email protected]^4.0.0 Peer Dependency Issue?

I am brand new to JavaScript. In an attempt to learn JavaScript, I cloned the webpack-starter project from GitHub (https://github.com/wbkd/webpack-starter). Then, I ran a npm install in the clone folder on my desktop, and then I ran a npm audit fix upon seeing a found 1 low severity vulnerability message in the Git Bash console. Then, I saw this message, npm WARN [email protected] requires a peer of [email protected]^4.0.0 but none is installed. You must install peer dependencies yourself.

Before investigating the above warning, I ran a npm start in PowerShell from the project folder. I received no error messages, but my browser (Chrome) never launched.

Powershell

Then, I investigated the npm WARN message and found this, https://stackoverflow.com/a/64733624/9698039, which led me to this, https://github.com/webpack/webpack-dev-server/issues/2807#issuecomment-734982609, which led me to the decision to downgrade my version of webpack from ^5.10.0 to "webpack": "^4.0.0".

Before downgrading, here was my package.json:

{
    "name": "webpack-starter",
    "version": "1.0.0",
    "description": "A light foundation for your next frontend project based on webpack.",
    "scripts": {
        "lint": "npm run lint:styles; npm run lint:scripts",
        "lint:styles": "stylelint src",
        "lint:scripts": "eslint src",
        "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js",
        "start": "webpack serve --config webpack/webpack.config.dev.js"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/wbkd/webpack-starter.git"
    },
    "keywords": [
        "webpack",
        "startkit",
        "frontend",
        "es6",
        "javascript",
        "webdev"
    ],
    "author": "webkid.io",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/wbkd/webpack-starter/issues"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/plugin-proposal-class-properties": "^7.12.1",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/preset-env": "^7.12.7",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.2.2",
        "clean-webpack-plugin": "^3.0.0",
        "copy-webpack-plugin": "^6.4.0",
        "cross-env": "^7.0.3",
        "css-loader": "^5.0.1",
        "eslint": "^7.15.0",
        "eslint-loader": "^4.0.2",
        "file-loader": "^6.2.0",
        "html-loader": "^1.3.2",
        "html-webpack-plugin": "^4.5.0",
        "mini-css-extract-plugin": "^1.3.2",
        "node-sass": "^5.0.0",
        "postcss-loader": "^4.1.0",
        "sass-loader": "^10.1.0",
        "style-loader": "^2.0.0",
        "stylelint": "^13.8.0",
        "stylelint-config-standard": "^20.0.0",
        "stylelint-webpack-plugin": "^2.1.1",
        "webpack": "^5.10.0",
        "webpack-cli": "^4.2.0",
        "webpack-dev-server": "^3.11.0",
        "webpack-merge": "^5.4.0"
    },
    "dependencies": {
        "@babel/polyfill": "^7.12.1",
        "core-js": "^3.8.1"
    }
}

And here was my webpack.config.dev.js:

const Path = require('path');
const Webpack = require('webpack');
const { merge } = require('webpack-merge');
const StylelintPlugin = require('stylelint-webpack-plugin');

const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-cheap-source-map',
  output: {
    chunkFilename: 'js/[name].chunk.js',
  },
  devServer: {
    inline: true,
    hot: true,
  },
  plugins: [
    new Webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
    }),
    new StylelintPlugin({
      files: Path.join('src', '**/*.s?(a|c)ss'),
    }),
  ],
  module: {
    rules: [
      {
        test: /.js$/,
        include: Path.resolve(__dirname, '../src'),
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          emitWarning: true,
        },
      },
      {
        test: /.html$/i,
        loader: 'html-loader',
      },
      {
        test: /.js$/,
        include: Path.resolve(__dirname, '../src'),
        loader: 'babel-loader',
      },
      {
        test: /.s?css$/i,
        use: ['style-loader', 'css-loader?sourceMap=true', 'postcss-loader', 'sass-loader'],
      },
    ],
  },
});

To downgrade webpack, I changed "webpack": "^5.10.0" to "webpack": "^4.0.0" in the package.json and then ran npm install from Git Bash again.

Then, I ran npm start from PowerShell once again, and once again I see no error message, and I see the Compiled successfully message, but once again the browser does not launch. It appears as if the webpack peer dependency issue is unrelated to the failure of browser to launch issue, but I am new to JavaScript and therefore currently unable to make that claim with 100% confidence.

Source: Ask Javascript Questions

LEAVE A COMMENT