Errors are caused when attempting to install third-party JS plugins using npm within a foundation project

I am currently exploring projects involving NodeJS and npm. While experimenting with foundation CLI in Foundation 6.4, I decided to install a 3rd Party JS plugin called chart.js from

Following their documentation, I ran the command:

npm install chart.js --save

As recommended, I executed this command from inside the root directory of my foundation project. However, during the installation process, I encountered a long list of errors:

npm WARN tar ENOENT: no such file or directory...

Interestingly, these errors seemed to change each time I ran the installation.

D:\foundationtests>npm install --save chart.js
npm WARN tar ENOENT: no such file or directory...

Strangely, when I ran the command from within the nodeJS folder, everything worked smoothly:

D:\nodeJS\node-v10.16.0-win-x64>npm install --save chart.js
+ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3e353c2f2973372e1d6f7365736d">[email protected]</a>
added 6 packages from 8 contributors in 1.403s

   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.9.0 -...             │
   │               Run npm install -g npm to update!                │
   │                                                    ︎          │
   ╰────────────────────────────────────────────────────────────────╯

However, despite following the integration steps as mentioned in the documentation, I faced an error when restarting the foundation watch:

[10:38:51] Error in plugin "webpack-stream"
Message:
    ./src/assets/js/app.js
Module not found: Error: Can't resolve 'chart.js' in 'D:\foundationtests\src\assets\js'
...

This issue persists even after adding the necessary import statement to app.js. The problem seems to be either with the integration process or some missing steps during installation. I'm out of ideas on how to proceed further...

EDIT: It's worth mentioning that I do not have admin privileges on the machine where I am attempting to execute the installation. This has not been a concern while installing other components like Foundation ZURB Template, but I felt it was important to note for clarity.

javascriptnpmzurb-foundation

Answer №1

An identified glitch or problem has been reported within npm platform. One potential solution is to execute the command rm -rf node_modules, then attempt the task once more and verify if upgrading npm is possible.

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

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

My current approach involves using PHP to combine multiple css (or js) files into a single file, while also compressing the content using GZIP. For example, the HTML page makes calls to resources like this... <link rel="stylesheet" href="Concat.php?fi ...

phpjavascriptcsscompressionserver-side

Angular 2 encountered a fatal error: Issues with parsing the template:

Here is the code snippet I am currently working with: <div class="container"> <div [hidden]="loggedIn"> <md-grid-list cols="6" [style.margin-top]="'20px'"> <md-grid-tile [colspan]="1"></md-grid-tile> I have already ...

javascriptangular

Unable to animate a second click using jQuery/CSS

I'm having an issue with animating on click using CSS. The animation works fine on the first click, but it doesn't work on the second click. This is because the click event is being overridden by jQuery to enable the dropdown menu to open onClick ...

javascriptjquerycssanimation

Utilizing Regex Patterns to Manipulate CSS Attributes

I am dealing with a string containing CSS properties and their values: str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background: -webkit-linear-gradient(top, black, wh ...

javascriptcssregex

Tips for formatting a phone number using regular expressions in [Vue 2]

I am currently working on creating regex code that will meet the following requirements: Only allow the first character (0th index) in a string to be either a '+' symbol or a number (0-9). No non-numerical values (0-9) should be allowed anywhere ...

javascriptregexvue.jsvuejs2regex-group

Struggling to display the sorted array items on the screen?

Within the realm of my jsfiddle experiment, my aim is to organize items based on price from highest to lowest by utilizing the following function: function mySortingFunction() { var elements = [].slice.call(document.getElementsByClassName("price")); e ...

javascriptjqueryhtmlsorting

Gulp command could not be found in the specified directory: /usr/local/bin/gulp

Every time I try to run gulp, I keep encountering this error message: /usr/local/bin/gulp: No such file or directory Despite following advice from various questions on SO, none of the solutions have resolved my issue. I've been using gulp smoot ...

node.jsnpmgulp

How can I access the variable that evaluated as true in an if statement?

I'm facing a bit of a challenge with testing 2 variables for the same value. Is there a way to achieve this? var x = 'abc'; var y = 'def'; if (x=='abc' || y=='abc'){ z = 'result&a ...

javascriptnode.js

Wiki experiencing issues with NodeJS HttpGet functionality

Goal Retrieve the HTML content of a Wiki Page. Introduction In an attempt to fetch the HTML of a Wiki page () for data parsing purposes, I am utilizing NodeJS and its HTTP Request methods. Code Snippet Below is the simple code snippet that accesses th ...

javascripthtmlnode.jshttphttp-get

Retrieve a DOCX file via AJAX response

I am encountering an issue with a Django function that returns a file: ... return FileResponse(open('demo.docx', 'rb')) I am using ajax to fetch it on the client side. Now, I need to download it on the client side. This is the code I a ...

javascriptdjangoajax

What is the best way to trim a string property of an object within an array?

I am seeking a solution to access the "description" property of objects within an array and utilize a string cutting method, such as slice, in order to return an array of modified objects. I have attempted using for loops but have been unsuccessful. Here ...

javascriptarraystypescriptobjectslice

Steps to Activate a Hyperlink for Opening a Modal Dialogue Box and Allowing it to Open in a New Tab Simultaneously

I am currently working on a website project. Within the website, there is a hyperlink labeled "View Page". The intention is for this link to open the linked page in a modal dialog upon being clicked. Below is the code snippet that I have used to achieve t ...

javascriptjqueryhtmlweb-applications

Text input setting for jQuery UI Slider

Currently, I am utilizing jQuery UI sliders to input values in text boxes. However, I would like this functionality to be bidirectional; meaning if a value is entered into the text box, I want the slider to move to the corresponding position. I am unsure ...

javascriptjqueryjquery-ui

React - Unable to perform 'removeChild' on 'Node' object: The specified node cannot be removed as it is not a child of this node

I am encountering an issue in my React project with the following structure: <div className="App"> <BrowserRouter> <BasicLayout title={"test"}> <Routes> <Route path="/home&qu ...

javascriptreactjs

The web-pack-dev server is failing to automatically refresh the browser content

As a newcomer to npm and web-pack-dev server, I recently dove into creating a ReactJs app using nmp and webpack. Initially, everything ran smoothly - whenever I saved content, it would automatically refresh and reload in the browser. However, the next da ...

reactjsnpmwebpackwebpack-dev-server

There seems to be an issue with AppModule in your code. The error message states that it is not recognized as an NgModule and the problem

After upgrading to node 6, angular 4, typescript 2.3.2, and @angular/cli 1.02, I meticulously followed the steps outlined in the Guide for updating @angular/cli. I will include my entire package.json below in case there are any relevant details. The specif ...

javascriptangulartypescriptnpmangular-cli

What could be causing the 403 Error when using Blogger API with AngularJS?

I'm relatively new to working with 3rd Party APIs and I'm currently exploring how to integrate Blogger's API into my AngularJS website to create a blog feed feature. After setting everything up, I've made a request and received a 200 s ...

javascriptangularjsapigoogle-apiblogger

The process of incorporating user properties into the output of a Service Bus topic from a Javascript Azure Function

I'm currently developing a TypeScript Azure Function that utilizes an Azure Service Bus topic as its output. Although I am able to send messages successfully, I have encountered difficulties in setting custom metadata properties for the message. In m ...

javascripttypescriptazureazure-functionsazureservicebus

How to move a div beneath the JavaScript files in Drupal 7

I am facing a challenge where I need to position a div right above the body tag without interfering with the scripts located above it. Despite my efforts, I have not been successful in achieving this goal. I attempted to use Hook_page_build to position t ...

javascripthtmldrupal-7hook

What could be the reason my mat-form-field is not displaying the label?

I'm currently working on a project using Angular Material to build a web page. I am facing an issue with the mat-form-field component as the label is not displaying, and I can't figure out why. Any assistance would be greatly appreciated. Thank y ...

javascriptangulartypescriptangular-material