Having trouble installing $ npm i mini-css-extract-plugin. Any ideas on what might be causing the issue?

There seems to be an error in my setup. I am using Visual Studio Code with gitBash.

$ npm i mini-css-extract-plugin
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107c7563637f7e3d25243d797e64627f3d6775726071737b50213e203e20">[email protected]</a>
npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="354250574554565e75011b01031b05">[email protected]</a>
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.39.1" 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="2d40444344004e5e5e004855595f4c4e59005d41584a4443fd0f030f03">[email protected]</a>
npm ERR! node_modules/mini-css-extract-plugin
npm ERR!   mini-css-extract-plugin@"*" 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 C:\Users\Smith\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Smith\AppData\Local\npm-cache\_logs\2021-08-19T13_12_04_740Z-debug.log

I have included my package.json file below. Can you help me identify what might be causing the issue? How do I ensure version compatibility?

{ "name": "lesson-54-intro-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.5.5", "@babel/preset-env": "^7.5.5", "autoprefixer": "^9.6.1", "babel-core": "^6.26.3", "babel-loader": "^8.0.6", "babel-polyfill": "^6.26.0", "css-loader": "^3.1.0", "file-loader": "^4.1.0", "html-webpack-plugin": "^3.2.0", "postcss-loader": "^3.0.0", "precss": "^4.0.0", "style-loader": "^0.23.1", "webpack": "^4.39.1", "webpack-cli": "^3.3.6", "webpack-dev-server": "^3.7.2" }, "dependencies": { "axios": "^0.19.0" } }

Answer №1

Refer to the modifications below.

The error message indicates that the webpack version is not compatible, so you can either:

  • update the lesson-54-intro-webpack package
  • downgrade the mini-css-extract-plugin

Update: Considering the content of your package.json

You should upgrade your webpack version to version 5

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Initiate the Loop process once the ReadStream pipe operation has completed

Feeling a bit stuck on the title here, as I seem to be in over my head... I'm currently working on automating a test where I need to extract headers from a CSV file and validate them. I'm using csv-parse for parsing the CSV file. After extracti ...

What CSS style should be used to fill both the thumbs up and thumbs down icons of a glyphicon?

Using glyphicon icons instead of other icons (fa icons), I am able to change the color of the icon, but it does not completely fill the icon with color like Facebook's like button. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 ...

`Obtaining an array of selected values from a deeply nested JSON object`

Looking to extract specific key values from a nested JSON object based on the boolean value of another key. In this case, I need the "name" key values for items where the "checked" key is true, and return them in a result array. Here is an example of the ...

Elegant method for politely asking individuals utilizing IE7 and earlier versions to leave?

TLDR: Politely ask IE6/7 users to switch browsers without accessing content. In essence, I don't want people using IE7/6 on my web app. I was considering using a doc.write function after loading to replace the page with a message stating "Sorry, your ...

Syntax necessary to utilize conditional variables for altering SQL queries within Node.JS

As a newcomer to NodeJS, I am uncertain about the most effective method and syntax for creating an MS SQL query with conditional code. Below is a simplified version of what I aim to achieve, using pseudocode: // @route GET /api/flow/data/references async ...

What could be causing my div elements to not appear on the page?

Hey there, this is my debut post here so bear with me on the formatting. I'm currently working on a project and encountering some hurdles with my divs. Even though I've left space for them, I just can't seem to get my divs (or cards) to disp ...

What is the best way to place a floating elastic div on top of an elastic background and ensure that the div stays in place?

Looking for some creative input here. Don't have a specific question in mind, but open to ideas. Just to clarify, I want both the floating div and the background to resize as the window size changes, while keeping the div in the same position on top ...

Using JavaScript to analyze and handle newlines, spaces, and the backslash character

Hello everyone, I'm hoping things are going well. I am currently working on removing newline and "\" characters from a string that I have after using JSON.stringify(). The string in question appears as follows: "[{\n \"id_profile&bs ...

Looking for MongoDB models based on date values?

In my Node.js mongodb application, I have a schema set up as follows: const calendarSchema = new Schema ({ title: String, start: String, //start date end: String, // end date endDate: String, sessionsRan: Number, _user: {type: Schem ...

Tips on saving the background image URL value into a variable

How can I save the URL value of a background image in a variable? For example: image: url(images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg); I store this value as value = images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg in a variable and then use this variable in an href tag. ...

Developing SAPUI5: Construct a GenericTile featuring a centrally positioned icon

I'm having trouble creating a custom tile in SAP that inherits from sap.suite.ui.commons.GenericTile and only displays an icon centered in the middle of the tile. The standard aggregations and properties are causing issues as they position the icon on ...

A guide to populating multiple "Select" controls with data in Node.js using Mongoose

I am currently working on a project in Express JS where I am using Mongoose to interact with MongoDB. Currently, I am able to fill a select control in my view using the following code: app.get('/new_alumno', alumno.create); However, I now have ...

execute the execCommand function following an ajax request

I am currently developing a WYSIWYG editor and encountering an issue with image handling using execCommand. Here is a simplified example of my page structure: <div id="buttons_panel"><input id="img_submit" type="button"/></div> <div ...

What is the best way to style odd and even divs in CSS?

I am struggling with applying different CSS styles to the odd and even divs in my code. The current implementation I have does not seem to be working as expected. I specifically want the styling to target only the direct children of the div, rather than an ...

I have a query regarding the load function and JSON

Is it feasible to achieve something similar to this? $.ajax({ url: "test.php", success: function(json, json1){ //I wonder if I can have more than one parameter here? $m0 = []; $m0.push(parseFloat(json)); alert($m0); //display 750 $m1 ...

Troubleshooting the non-responsive behavior of Bootstrap's hidden-sm-down

Why are the two images within the <div> with hidden-sm-down still visible on my laptop when I resize the page? I need them to be hidden on small devices for a different menu layout. <div class="row"> <div class="col-m ...

Modifying the background image of div elements with JQuery in a loop function is ineffective when using Google Chrome

I am facing an issue in my application where I have a for loop to change the background image of two divs. The code snippet is as follows: for (var i = 0; i < length; i++) { $("div_" + (i + 1)).css("background-image", "../imageFile.png"); ...

how to adjust the width of table columns dynamically using ng-repeat and AngularJS

Working on a user interface that contains a table where the column widths adjust according to percentage data. I'm using ng-repeat to populate the table, but need help setting unique widths for each piece of data received. Here's some of my Angul ...

Setting up web services using httpster NPM

Currently, I am developing a demo project and utilizing the Node NPM packages listed below: httpster express The httpster package has been globally installed on my system. The project directory is located at D:\Project\Demo\Node, which co ...

What is the importance of setting up an HTTP server?

Can anyone explain why, in nodeJs programming with javascript, it is necessary to establish a server using the http module, even though one could simply utilize the fs module for reading, writing, and updating data stored in a json file? ...