webpack can not install style-loader issue (Vue.js 2)

Question

I need to install style-loader so that I can load import 'bootstrap-icons/font/bootstrap-icons.css'. However, as I type in npm install style-loader The error like below pops up:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.41.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from [email protected]
npm ERR! node_modules/style-loader
npm ERR!   style-loader@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/jessiechen/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jessiechen/.npm/_logs/2023-07-16T00_15_26_704Z-debug-0.log

This is my webpack.config.js file

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    resolve: {
        extensions: ['.js', '.jsx','.vue', '.css'],
        modules: [
            'node_modules'
        ]  
    },
    module: {
        rules: [
            {
                test: /\.vue?$/,
                exclude: /(node_modules)/,
                use: 'vue-loader'
            },
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/i,
                use: [{loader:'style-loader'}, {loader: 'css-loader'}],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        esModule: false
                    }
                  },
                ],
            },
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    })],
    devServer: {
        historyApiFallback: true
    },
    externals: {
        // global app config object
        config: JSON.stringify({
            apiUrl: 'http://localhost:4000'
        })
    },
}

This is my package.json file:

{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "@babel/runtime": "^7.22.6",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5",
    "regenerator-runtime": "^0.13.11",
    "vee-validate": "^2.2.8",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.22.7",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-vue": "^2.0.2",
    "css-loader": "^3.3.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "vue-loader": "^14.2.3",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

I already tried to delete package.lock.json file and reinstall all the package again, but the error keeps popping up every time I try to install style loader.

Answer 1

npm install style-loader --legacy-peer-deps. It will help you a lot if you get comfortable reading and trusting the error messages your tools emit.

But you'll also want to update your dependencies (check npm outdated). You have various versions of packages that will likely be incompatible. For anything with a breaking change (the left-most number in the version changed), you may want to check that package's changelog, which can usually be found in its GitHub repo or in the Releases tab.