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

Discover the process of integrating PWA features into an Express web application

I'm currently in the process of integrating PWA into a web application. I've created a manifest.json file and added it to the head of my page, which is loading correctly. However, the service worker registered in my app.js doesn't seem to be ...

javascriptnode.jsexpressnpmprogressive-web-apps

Dropdown Navigation - Utilizing jQuery and CSS

I am encountering an issue with a dropdown menu I have been working on. Take a look at this screenshot for reference: Below is the snippet of HTML code: <ul class="topnav"> <li><a href="#">Home</a></li> <li> ...

jqueryhtmlcssmenudrop-down-menu

How can I troubleshoot email validation issues in Vue.js?

<button type="submit" class="register-button" :class="(isDisabled) ? '' : 'selected'" :disabled='isDisabled' v-on:click=" isFirstScreen ...

javascriptvue.js

I am encountering an issue with my Javascript file not running due to a bigint error

I'm attempting to utilize @metaplex/js for NFT minting. Usually, my .js files function correctly, but when I execute the file, this particular error arises. bigint: Failed to load bindings, pure JS will be used (try npm run rebuild?) The meaning of ...

javascriptnpmsolanametaplex

Vite and Transloadit encountered a type error: Unable to access properties of undefined when trying to read 'Resolver'

Currently, I am developing a Vite application using Vue 3.x that involves interactions with images/PDFs through Transloadit. While working on creating my own plugin for Transloadit integration, I encountered some issues. Initially, I managed to resolve an ...

javascriptvue.jsvuejs3vitetransloadit

Vue 2.0 custom filter not producing any output

I am attempting to create a customized filter that identifies and returns the items that correspond to a given input. It functions effectively with basic arrays like ['Apple', 'Banana', 'Cupple'], but encounters difficulty whe ...

javascriptvuejs2vue.js

Tailwind's implementation of CSS Grid allows for the creation of a grid structure where specific cells can be selectively populated

I am currently using Tailwindcss with my Next.js application to showcase multiple images retrieved from a Supabase database in a grid layout. However, I am facing a problem where the images are being displayed in rows instead of columns within the grid whe ...

cssnext.jsgridtailwind-csscss-grid

How can you configure your OpenUI5 web app in the package.json file to run as a Node.js server application?

I am in the process of developing a Node.js application with SAPUI5/OpenUI5 SPA, and here is my package.json file: { "name": "societyaleph", "version": "1.0.0", "description": "Society Aleph", "main": "index.js", "scripts": { "start": "react ...

node.jsnpmsapui5npm-start

having difficulty setting up foundation using the command line interface

I'm attempting to install Foundation 6 CLI but I keep encountering this error: https://i.stack.imgur.com/yr0AI.png Can someone please assist me in figuring out what's causing this issue? Thank you. ...

npmzurb-foundationnpm-installzurb-foundation-6

HTML source does not contain nested link elements for linked areas with nested hyperlinks

I want to create a visually and functionally appealing hyperlink within a larger rectangular shape that spans the full width of the page and is also a hyperlink itself. Below, you'll find an ASCII-art representation of what I'm trying to achieve: ...

htmlcss

Mysterious package found its way into my node_modules directory

Recently, I've been encountering a persistent package installation issue in my node_modules folder with a package named <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8a8b0b9b6acb7b5b2abf5a8aabdbaadb1b4ac98eaf6e9f6e9ee"&g ...

node.jsnpmphantomjspackage.json

Hover events in the browser are currently operating at a sluggish pace

When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...

cssreactjshover

Compiling TypeScript into JavaScript with AngularJS 2.0

Exploring the capabilities of AngularJS 2.0 in my own version of Reddit, I've put together a script called app.ts ///<reference path="typings/angular2/angular2.d.ts" /> import { Component, View, bootstrap, } from "angular2/angular2 ...

javascriptangularjsnpmreddittypescript1.5

Problem with Vue Router in Laravel subroute leading to incorrect component discovery

While I had a similar setup working smoothly on another Laravel/Vue project with the main route /, I encountered an issue when grouping the Vue instance under an admin subroute. All paths entered after "admin" would redirect to a PageNotFound component tha ...

laravelvue.jsvue-router

What is the best way to integrate a React component library that relies on Styled Components with another library that also has a dependency on Styled Components?

After recently converting my internal component library to Styled Components, I encountered an issue with duplicate instances of 'styled-components' in my Create React App (CRA) project. Both the component library and the CRA application are impo ...

reactjsnpmdependenciespackagestyled-components

Tips for styling an array of objects using mapping techniques

I have an array of messages and I am currently using the map() function. Each message in the array has two keys - one for the author and another for the message content. What I want to achieve is to change the styles of the div tag when displaying the last ...

javascripthtmlcssreactjs

Reference to a method from a child component in Vue returns an undefined method when using v-for loop

I am facing an issue with a child component and a button that triggers a method within it: <div v-for="(i,index) in user.usertype.max_user" :key="index" class="d-flex w-50"> <vue-user-profiles ref="userProfileComponent"></vue ...

javascriptvue.js

Trigger the onClick event of an element only if it was not clicked on specific child elements

<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...

javascripthtmlcssreactjsfrontend

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

javascriptcssangularjs