Packages have gone astray post node_modules scrub

I encountered an issue with npm run watch getting stuck at 10%, so I took the step of deleting the node_modules directory and package-lock.json. However, it seems that I may have installed modules using npm install without the --save-dev option. Even after reinstalling some of them, I still receive a warning and am unable to pinpoint which package is missing...

WARNING in ./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/laravel-mix/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css&)
Module Warning (from ./node_modules/css-loader/dist/cjs.js):
Warning

(476:2) Unable to find uri in 'background:url() no-repeat top left black'
 @ ./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css& (./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/laravel-mix/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css&) 2:14-388
 @ ./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css&
 @ ./resources/js/components/common/ContenuComponent.vue
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

In response to this, I proceeded to:

  • npm install postcss-loader --save-dev

  • npm install style-loader --save-dev

  • npm install css-loader --save-dev

  • npm install file-loader --save-dev

  • npm install vue-loader --save-dev

    Is there a way to determine what is causing the issue? Thank you in advance!

cssvue.jsnpm

Answer №1

Deleting the package-lock.json file means losing track of the specific versions of packages installed previously. It appears that there may have been a problem with the css-loader module, which is a dependency of Laravel.

The simple solution would be to restore the package-lock.json file, delete the node_modules folder, and then reinstall everything using npm install.

Answer №2

Based on the details provided, there are a couple of troubleshooting steps you could take. One option is to perform an npm cache clean or npm cache clean --f (force). If you choose to force clean the cache, make sure you understand the implications before proceeding. After cleaning the cache, try running npm install again. Additionally, verify that your NodeJS version is compatible with the packages you are using. Use Node -V to check your version and ensure that css loader is compatible with it.

Answer №3

Once I believed that the problem had been resolved, it resurfaced today (even worse this time, as it was an error). I reverted back to the old version of package-lock.json and after numerous attempts and hours lost, it finally worked.

I anticipate that this issue may arise again in the future, and it is not feasible for me to continue using this method as I will be adding more packages down the line. Is there a way to add all missing packages in the package.json dev dependencies? I am unsure how to identify them.

It appears that the command `npm install ls node_modules --save` was effective in the past, so I am attempting to find something similar within the package-lock.json file (is this wishful thinking?).

Thank you very much

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

What is the best way to create a slideshow that automatically starts upon loading and pauses when hovered over?

I have recently set up a div element for my slideshow. I've included a script to enable navigation using next and previous arrows. However, I am looking to add an automatic slideshow feature that stops on hover. As a beginner, I would appreciate any a ...

javascriptjqueryhtmlcsshover

Using computed properties with Nuxt's `head` property can result in error messages being displayed

While utilizing Nuxt.js, I am using head() { } method to configure SEO metadata. However, when accessing computed properties within this method, Vetur displays the following message: Property 'domain' does not exist on type 'CombinedVueInst ...

typescriptvue.jsnuxt.jsvetur

Swapping the icon in the panel heading of Bootstrap 3 Collapse based on its collapse status

Despite many attempts, I haven't been able to make any of the provided answers work in my code. My setup involves using Bootstrap 3 panels and collapse functionality to display advertisements. In the default view, only the advertisement heading is vi ...

javascriptjquerycsstwitter-bootstrap

Tips for rearranging a span following an image?

Looking for a solution to rearrange a span element after an image within automatically generated HTML. Sample HTML: <span>closed</span> <img alt="Click to reset" src="xxx" class=""> Currently, the span appears before the img in the cod ...

htmlcss

"Getting Started with Vue.js: Exploring the setup() and mounted

I recently started using Vue.js and am currently tackling a project. In my setup(), I've declared some constants, with one of them named "c". I found that I can still use console.log(this.c) in mounted() to print out the constant, but when I attempt t ...

vue.jswebvuejs3vue-composition-api

Searching and updating a value in an array using JavaScript

I need help solving a Javascript issue I'm facing. I'm working on an e-commerce project built in Vue, and I want to implement the selection of product variants on the client-side. The data format being sent to the backend looks like this: { & ...

javascriptvue.js

Encountering difficulty when trying to initiate a new project using the Nest CLI

Currently, I am using a tutorial from here to assist me in creating a Nest project. To start off, I have successfully installed the Nest CLI by executing this command: npm i -g @nestjs/cli https://i.stack.imgur.com/3aVd1.png To confirm the installation, ...

javascriptnode.jstypescriptnpmnestjs

A trio of versatile sections within a box, one designed to accommodate text overflow

Trying to create a CSS layout where three texts are placed side by side without wrapping, but once the first text is too long, it needs to be truncated. Check out the image below for more details. Methods I have attempted so far: Floated positioning of ...

htmlcss

Sharing API types from a NestJs backend to a Vue frontend (or any other frontend) application: Best practices

In my development setup, I have a VueJs and Typescript Front End app along with a PHP server that is in the process of being converted to NestJs. Both of these projects reside in the same Monorepo, allowing me to share types for DTOs between them. I am ex ...

typescriptvue.jstypescript-typingsnestdto

What is the best way to prevent text-decoration from being applied to icons when utilizing font-awesome inside a hyperlink?

I recently began using FontAwesome and it's been going well. However, I have a question about using it with an anchor tag that has text-decoration:none, and on hover text-decoration:underline. Whenever I hover over the link, the icon also receives the ...

cssfont-awesome

Having trouble initiating the webpack development server

As a newcomer to ES6, I decided to set up my development environment by following a guide for beginners. After completing all the steps as instructed, I reached the point of installing the webpack development server. Upon entering the command npm run bui ...

javascriptnode.jsnpmwebpackes6-modules

Having trouble with generating HTML templates with inline CSS in Flask

How can I randomly select a background picture (out of 4) for my homepage on a personal website using Flask? Despite my attempts to create an HTML template with inline CSS, the selected image does not display as expected. I've already tried using url ...

pythonhtmlcssflaskjinja2

Steps to incorporate a personalized design onto a card element within Material UI

As a JavaScript developer, I was tasked by my brother to create a simple webpage for his business. Admittedly, frontend design is not my strongest suit so I decided to utilize Material UI and added some CSS to paste everything together. Right now, I am wo ...

cssuser-interfacematerial-uifrontend

Node.js 5.0.0 facing compatibility issues with installing NPM packages

I'm currently in the process of setting up my npm packages that are required for my code to function properly. Unfortunately, every time I attempt to install any npm package, I am faced with the same error message: Your system is configured for Node ...

javascriptnode.jsnpm

At what point does a dynamically loaded CSS file in the head section of a webpage actually

If the answer is already out there somewhere, I would really appreciate a link because I just can't seem to find it. When loading .php pages, I either include 'header.php' directly with <?php include 'header.php'; ?> or on ...

javascriptphpcss

How can we have a div stay at the top of the screen when scrolling down, but return to its original position when scrolling back up?

By utilizing this code, a div with position: absolute (top: 46px) on a page will become fixed to the top of the page (top: 0px) once the user scrolls to a certain point (the distance from the div to the top of the page). $(window).scroll(function (e) { ...

javascriptcss

What is the process for bundling a separate JavaScript file with Webpack5?

I am new to the world of webpack. I have 2 javascript files and I want to designate one as the main entry file. However, for the other file, I only want to include it in specific files. For example, looking at the file structure below, main.js is my entr ...

javascriptnpmwebpackfrontendwebpack-5

Semantic UI (React): Transforming vertical menu into horizontal layout for mobile responsiveness

I have implemented a vertical menu using Semantic UI React. Here is the structure of my menu: <Grid> <Grid.Column mobile={16} tablet={5} computer={5}> <div className='ui secondary pointing menu vertical compact inherit&apos ...

javascriptcssreactjssemantic-uisemantic-ui-react

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...

javascriptjqueryhtmlcssgoogle-maps

Sending information from a Vuex module to a component following an axios request

I'm currently working on developing a Vue.js based application. Here's the scenario I'm facing: I have a component with a popup where users can create an 'expense' entry. Upon clicking the 'save' button, a function in the ...

javascriptvue.jsaxiosvuex