The css-loader is missing the required dependency peer Webpack5, causing a resolution error

Recently, I've ventured into the world of JavaScript and I'm looking to incorporate vue-audio-visual into my project. However, I encountered a perplexing error in my node console that seems unrelated. The npm error message reads as follows:

code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503323237d3c3f3134352210667e667e60">[email protected]</a>
npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="611604031100020a21554f55574f51">[email protected]</a>
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from @soda/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0365716a666d676f7a2e6671716c71702e746661736260682e736f76646a6d43322d3b2d32">[email protected]</a>
npm ERR!   node_modules/@soda/friendly-errors-webpack-plugin
npm ERR!     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76151a1f5b051304001f151336425843584743">[email protected]</a>
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e0efeaaef3eff6e4eaedaee1e2e1e6efc3b7adb6adb2b6">[email protected]</a>
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!       3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR!   webpack@"^4.0.0" from @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42212e2b6f322e37252b2c6f202320272e02766c776c7377">[email protected]</a>
npm ERR!   node_modules/@vue/cli-plugin-babel
npm ERR!     dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!   19 more (cache-loader, thread-loader, @vue/cli-service, ...)
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="fe9d8d8dd392919f9a9b8cbec8d0c8d0ce">[email protected]</a>
npm ERR! node_modules/css-loader
npm ERR!   peer css-loader@"*" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c6c5d59ddcdfd1d4d5c2f081859e81809e80">[email protected]</a>
npm ERR!   node_modules/vue-loader
npm ERR!     vue-loader@"^15.9.2" from @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21424d480c5244535748424461150f140f1014">[email protected]</a>
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8c8386c29f839a888681c28d8e8d8a83afdbc1dac1deda">[email protected]</a>
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!       3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR!   css-loader@"^6.6.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c5d7d0c2d3d1d9f2879c85869c82">[email protected]</a>
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781b0b0b551417191c1d0a384e564e5648">[email protected]</a>
npm ERR!   node_modules/css-loader
npm ERR!     peer css-loader@"*" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c4a49591150535d58594e7c0d09120d0c120c">[email protected]</a>
npm ERR!     node_modules/vue-loader
npm ERR!       vue-loader@"^15.9.2" from @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43202f2a6e302631352a202603776d766d7276">[email protected]</a>
npm ERR!       node_modules/@vue/cli-service
npm ERR!         peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3556595c18455940525c5b18575457505975011b001b0400">[email protected]</a>
npm ERR!         node_modules/@vue/cli-plugin-babel
npm ERR!         3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR!     css-loader@"^6.6.0" 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/julapps/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/julapps/.npm/_logs/2022-10-23T12_42_49_511Z-debug-0.log

In my package.json file, I have the following dependencies listed: 

css-loader": "^6.6.0"

And the vue dependencies are as follows:

"devDependencies": {
  "@vue/cli-plugin-babel": "~4.5.0",
  "@vue/cli-plugin-router": "^4.5.15",
  "@vue/cli-service": "~4.5.0",
  "@vue/compiler-sfc": "^3.0.0",
  "webpack": "^4.46.0"
}

If anyone can shed some light on what steps I should take next, I would greatly appreciate it.

javascriptvue.jsnpmvuejs3node-modules

Answer №1

Instead of using Vite, are you working with Vue3 and Webpack?
While it's not a common choice, I personally recommend Vite.

The error message regarding the issue is quite clear. Allow me to explain:

In order to install css-loader (or any package that depends on it), Webpack 5 or higher is necessary

If you visit the changelog for this package, you'll see that upgrading to Webpack 5 is essential

The minimum supported webpack version is now 5, so we suggest updating to the latest version for optimal performance

Here are some options for you:

  • Consider using Vite instead
  • Install Webpack 5 using npm
  • Try using yarn/pnpm to receive more detailed error messages

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

When using REACT to fetch data from an API, the absence of an 'Access-Control-Allow-Origin' header may result in access issues

I am working on a project that involves retrieving products from a company's API. After reaching out to the company, they provided me with the following information: CORS allowed origins for local development is "http://localhost:1229" To adhere t ...

javascriptreactjsapi

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...

javascripthtmlcssajax

Retrieving the correct selected value from multiple select tables created through a for loop can be achieved using JavaScript or jQuery

Despite searching Google and asking previous questions, I have not found a solution that addresses my specific issue. The common responses only pertain to one select element with multiple options. To further clarify, when I create code for a loop to genera ...

javascriptjqueryjsonajaxdom-events

The Owl Carousel npm package is experiencing issues within a ReactJS environment

Currently, I am developing a reactjs application and utilizing the owl carousel npm module to display some data. In my codebase, there is a component dedicated solely to rendering the owl carousel. To achieve this functionality, I have installed the owl c ...

javascriptreactjsowl-carousel

The JSON file gets emptied every time I refresh the page repeatedly

I am encountering an issue where my JSON file gets cleared if I restart the page quickly after using the fs module to read/write it. The JSON data is read at the beginning of the page like this: let preferencesJSON; try { preferencesJSON = fs.readFile ...

javascriptnode.jsjson

Issues arise when using res.send() with ExpressJS and Mongoose

Initially, I have multiple callbacks that need to be executed before sending a res.send() to construct a JSON API: app.get('/api', function (req, res){ ... function logPagesId() { console.log("load: " +pagesId); c ...

javascriptnode.jsmongodbexpress

Vue component fails to display upon clicking v-btn with a designated route

I'm experiencing difficulty with loading a component. My web app has a Navbar with a Drawer that links to each main page. Currently, I have a page called "Weapons.vue" which displays weapon categories in a video game (such as Sniper Rifles and Handgu ...

vue.jsvue-routervuetify.js

Translate a jQuery ajax request utilizing jQuery().serialize into plain JavaScript

Currently, I've been in the process of converting a jQuery script into vanilla JavaScript to completely eliminate the need for jQuery. The main functionality of the code includes: Upon clicking a button on the front end, an ajax request is sent, upda ...

javascriptjqueryajax

How to Make Buttons Vanish and Reappear

Check out this fiddle for a picture button 'scroller' that I created. It may not be perfect, but my main focus is on making the arrow buttons fade in and out when reaching the end of the picture order. I am considering using a JavaScript functio ...

javascriptjquery

Failure to showcase AJAX JSON data on DataTable

Issue with DataTable and AJAX JSON Data I have been encountering an issue while working on a project that involves using DataTable to display POST data via AJAX. The problem I am facing is that all the records are being displayed without pagination, even ...

javascriptphpjsonajaxdatatables

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

It seems that there are some style issues occurring in the production build hosted on Netlify for a specific component. The problematic component is a wrapper located at ./layout/FormLayout.tsx. Below is the code for this wrapper: const FormLayout: React.F ...

javascriptcssreactjsnext.jstailwind-css

What is the best method for incorporating meta data, titles, and other information at dynamic pages using Node.js and Express?

I am currently exploring methods to efficiently pass data to the html head of my project. I require a custom title, meta description, and other elements for each page within my website. Upon initial thought, one method that comes to mind is passing the da ...

javascripthtmlnode.jsexpress

Issue with JQuery's click and submit events not triggering, but change event is working fine

My webpage has a dynamic DOM that includes add and save buttons to interact with elements. Each row also has a remove option for deletion. When a user logs in, the controller redirects them to their homepage in the codeigniter PHP framework. This controlle ...

javascriptphpjqueryhtmlcodeigniter

Error encountered during secure HTTPS request due to cross-origin request blocking

I am encountering issues with a standard HTTPS Axios request from my Vue-based Frontend to our company's API, which resides on a server with an SSL certificate. testApi() { axios.get('https://rng-hub2.staging.rng:8001/rng/3/') .then ...

vue.jshttps

Tips on organizing a JSON object for a JavaScript project

For my project, I am designing a data structure that utilizes JSON. My goal is to create an efficient method for searching and editing the JSON object. Which structure would be considered standard in this scenario? Is there a preferred way to implement eit ...

javascriptjson

Use jquery to rotate the div and animate it to move upwards

Hey everyone! I'm having an issue with rotating and moving an image inside a div element. I've tried some code to make it work, but nothing seems to be happening. Any tips or suggestions on how to tackle this problem would be greatly appreciated. ...

javascriptjqueryrotation

I am currently having trouble with req.query not functioning correctly within Next.js for reading query parameters

I am facing an issue while working with a REST API in Next.js 13. I have created the API, which can be accessed at http://localhost:3000/api/portfolio. However, when I try to filter the data using query parameters like http://localhost:3000/api/portfolio?s ...

javascriptreactjsnext.js

Update the directory path for Angular ui-bootstrap templates

Currently, I am attempting to utilize ui-bootstrap.min.js in conjunction with external templates. An issue has arisen where the error message reads as follows: http://localhost:13132/Place/template/timepicker/timepicker.html 404 (Not Found) I desire fo ...

javascriptangularjsangular-ui

Methods for dynamically altering the background color of a parent component from a child component

Currently, I am working on a T-shirt design application using fabric.js within reactjs. I have encountered an issue when attempting to change the color of the t-shirt. My goal is to allow the color of the T-shirt to be changed from the child component but ...

javascriptreactjsnext.js

Implement AngularJS to ensure that scripts are only loaded after the page has finished rendering

I am having trouble implementing the TripAdvisor widget on my website. It functions correctly when the page is refreshed, but it does not appear when navigating through links. Additionally, an error message is displayed stating that the document could not ...

javascripthtmlangularjs