Errors of various kinds are occurring in Webpack during the npm install process

Whenever I execute npm install or npm ci, it triggers a webpack build that generates a plethora of incorrect errors. These errors allude to missing dependencies that are actually present. Interestingly, running npm ci seems to produce more errors than npm install.

However, executing the webpack build itself works flawlessly.

I am puzzled by this behavior as there doesn't seem to be any documentation on what exactly initiates this webpack build.

I would like to understand the following:

  • What prompts webpack during npm install? (I simply want it to install dependencies)
  • Why do these strange error messages appear?

My setup includes:

  • WSL 2 (Ubuntu 21.04) on Windows 11
  • NPM 7.5.2
  • Webpack ^5.65.0

An example of the error output is as follows:

matthias@daiquiri:~/dev/hamster-books$ npm ci
asset main.js 42.9 KiB [emitted] (name: main)
...
ERROR in ./app/js/dispatcher.js ...
Module not found: Error: Can't resolve 'ts-loader' in '/home/matthias/dev/hamster-books'
 @ ./app/js/hamstersBooks.js ...

The output goes on for some time, with repeated attempts at running webpack. Upon inspection, all the referenced directories and files exist. Some originate from the <code>node_modules while others are standard project references.

Answer №1

To resolve any conflicts caused by package installation and scripts, it is recommended to delete the node_modules folder and reinstall. This advice echoes the insights shared by @Harshal Patil in the comments.

I originally suggested this step as a comment, but since it successfully resolved the issue, I am now posting it as an answer in case it proves beneficial to others facing similar challenges.

Answer №2

Just wanted to share a quick tip in case anyone else runs into this issue. We were having trouble with the package name @xxx, but it turns out that the required package name is actually @yyy/xxx. Once we changed the name, the warning disappeared.

Hopefully this saves someone else from spending an hour (or two) trying to figure it out!

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

How to manage simultaneous requests in Parse Server Cloud Code

Imagine having some Cloud Code running on a Parse Server: Parse.Cloud.beforeSave("UserProfiles", function(request, response) { const query = new Parse.Query("UserProfiles"); query.equalTo("user", request.user); query.count({ success: f ...

Do you have any suggestions on how to send "iframe.contents()" to a PHP Script via Ajax?

I'm currently facing an issue in my code where I have an iFrame loading dynamic content, similar to a webpage (B.html) inside another page (A.php). On "A.php", users can edit the content of "B.html" inline. However, after the editing process is comple ...

Error message: The function r is not defined - Issue with Google Sign in on React app

I have successfully implemented Google Sign In for my react app during development, but I am facing an issue with it in the production environment. The npm module that I am using for Google authentication is available at https://www.npmjs.com/package/reac ...

To install bcrypt using node version 5.0.0 and npm version 3.5.1, use the command:

After updating node and npm, I encountered an error while trying to install bcrypt. The error message is as follows: sudo npm install bcrypt --save > [email protected] install /Users/XXX/node_modules/bcrypt > node-gyp rebuil ...

Here is a unique version of the text: "Implementing a JavaScript function in Angular to activate the data-bs

Attempting to use JavaScript in angular to close/hide a bootstrap5 modal, encountering an issue where the hide function in bootstrap is not working. When manually clicking a button with data-bs-dismiss attribute, it closes the modal as expected, but when t ...

Tips to instantiate an object of a different JavaScript class in Node.js

Hey there! I'm having trouble creating an instance of ProfileComparator in a different JavaScript file called index.js. Can someone help me resolve this error? strategy.js var cosineUtils = require("./jscosine"); var ProfileComparator = function(al ...

Transform the date to match the user's preferred timezone abbreviation

I am currently utilizing the momentJS library for timezone conversion logic within my JavaScript code. I retrieve the User Preference Timezone abbreviation from a web service response, but when attempting to convert the date using the Timezone abbreviation ...

Can you provide guidance on extracting the ID from the notes[] array within Getnote.vue and then using that ID to update a specific card?

On my dashboard, I have several cards that display titles and descriptions retrieved from the backend using axios.js. While the display section is working fine, I need to implement a feature where clicking on a card opens a popup for updating that specific ...

Using Node.js to serialize JSON POST data as an array

Looking to retrieve POST data from my front-end form. Upon using console.log(req.body), I receive the following output: [ { name: 'name', value: 'kevin' } { name: 'email', value: '' }, { name: 'phone' ...

My attempts to load the .mtl and .obj files using THREE.js have been unsuccessful

I've been working on creating a 3D model viewer using three.js, but I'm encountering issues with loading .mtl and .obj files. Despite following a tutorial at , the only model that loads successfully is the female one. Here is the code snippet I ...

Following a partial postback of the Update-panel, anything that is not within the panel seems to vanish

Query Description: I am facing an issue with an AJAX file-uploader control inside an update panel. Once a file is successfully uploaded, I want to display a Bootstrap popup to the user. Situation 1: When I include the update-panel property "updateMode=&a ...

What steps should I take to set up a personalized prompt for user input in AngularJS?

After setting up the UI and scope variables, I am faced with a task that requires the function to only continue when either the left or right button is clicked (meaning $scope.isLeft or $scope.isRight will be true). This behavior is akin to how a regular J ...

Difficulty with AngularJS pagination and encountering errors when trying to read the property 'slice' of an undefined value

Could someone please help me with this issue I'm facing? Here is the code snippet: (function () { var app = angular.module('store', ['ui.bootstrap']); app.controller('StoreController', function ($scope, $http) ...

Basic Tallying Code in JavaScript

Hi, I am currently working on creating a basic counter using HTML / CSS and Javascript. Unfortunately, my Javascript code is not functioning correctly, even after trying various solutions found online. I attempted to include "async" but it appears that my ...

Utilize the JSON response upon successful completion of an AJAX request

I'm currently working with this code snippet: function openIzmeni(value) { $.ajax({ url: "getRzaizmenu.php", type: "POST", async: true, data: { vrednostid:value}, //your form data to post goes here as ...

Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed. Here is the HTML code: <div id="main-content" class="container animated"> ...

Exploring the world of Node.js and the power of 64-bit var

Currently, I am developing a Node.js application that communicates via TCP with a C++ server. The server utilizes a binary protocol similar to Protocol Buffers but not identical. One of the data types returned by the server is an unsigned 64-bit integer ( ...

What is the reason behind the shifting behavior of e.currentTarget when using event delegation in jQuery?

Click here for the code snippet <div id="container"> <button id="foo">Foo button</button> <button id="bar">Bar button</button> </div> $('#container').on('click', function(e) { var targ ...

Navigate through PNG image - proceed only if the clicked area is transparent

Imagine having an image that looks like this: https://i.sstatic.net/Ab6aW.jpg I am looking to make it so that when I click on the transparent areas of the image, the click should pass through to the element below. However, if I click on a non-transparent ...

Is there a way to efficiently update multiple objects within an array using just one operation in MongoDB?

Below is the structure of an Order document that I am working with: "order" : { "id": 999, "products" : [ { "id": 1, "price": 12.344746 }, { ...