My task is to set up the style-loader in order to load
import 'bootstrap-icons/font/bootstrap-icons.css'npm install style-loader, I encounter the following error message:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="572032352736343c17637963617967">[email protected]</a>
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 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2655525f4a430b4a4947424354661508150815">[email protected]</a>
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
Here 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"
}
}
Despite trying to remove the package.lock.json file and reinstalling all packages, the issue persists every time I attempt to install the style loader.