0

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 webpack-dev-middleware@3.7.2 requires a peer of webpack@^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.

Thor
  • 181
  • 1
  • 2
  • 8

1 Answers1

1

So, I looked around some more and found this, https://stackoverflow.com/a/39753225/9698039, so I added open: true to devServer in the webpack.config.dev.js, resulting in this,

devServer: {
    inline: true,
    hot: true,
    open: true
}

And that worked! My browser launched. I'm still not sure if I could have used webpack without downgrading, but it seems like the browser launch issue is unrelated to the peer dependency issue.

Thor
  • 181
  • 1
  • 2
  • 8