What is the process of installing an npm module from a local directory?

I recently downloaded a package from Github at the following link: list.fuzzysearch.js. After unzipping it to a folder, I proceeded to install it in my project directory using the command:

npm install Path/to/LocalFolder/list.fuzzysearch.js-master -S

However, I encountered an error during the bundling process with webpack, indicating that some required modules were missing.

Question 1: Should I first run npm install in the downloaded package's folder before installing it in my project, for example:

~/local/folder/list.fuzzysearch.js-master$ npm install

Question 2: When importing a module in my app.js, how should I specify the path? Should I simply use the module name (e.g. 'react'), or should I provide the path to the JS file in the node_modules folder (e.g. 'node_module/react/dist/react.js')?

Question 3: Is there a method to uncover all transitive dependencies of a module and install them automatically?

Errors:

ERROR in ./~/list.fuzzysearch.js/index.js
Module not found: Error: Cannot resolve module 'classes' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/list.fuzzysearch.js
 @ ./~/list.fuzzysearch.js/index.js 1:14-32

ERROR in ./~/list.fuzzysearch.js/index.js
Module not found: Error: Cannot resolve module 'extend' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/list.fuzzysearch.js
 @ ./~/list.fuzzysearch.js/index.js 3:13-30

ERROR in ./~/list.fuzzysearch.js/index.js
Module not found: Error: Cannot resolve module 'to-string' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/list.fuzzysearch.js
 @ ./~/list.fuzzysearch.js/index.js 4:15-35

ERROR in ./~/list.fuzzysearch.js/index.js
Module not found: Error: Cannot resolve module 'get-by-class' in /home/mypc/IdeaProject/OpenDimSum/frontend/node_modules/list.fuzzysearch.js
 @ ./~/list.fuzzysearch.js/index.js 5:17-40

My app's JavaScript code:

require('../../../node_modules/bootstrap/dist/css/bootstrap.css')
require ('../public/styles.css')
require ('../index.html')
import React from 'react'
import {render} from 'react-dom'
import 'list.js'
import 'list.fuzzysearch.js'
require('../../../node_modules/bootstrap/dist/js/bootstrap')

Answer №1

Seems like the script you're aiming to incorporate is an npm package that hasn't been officially released on the npm registry. To integrate it into your project, follow these steps:

  1. Include
    "list.fuzzysearch": "javve/list.fuzzysearch.js"
    within the dependencies section of your package.json
  2. Perform a npm install like usual
  3. Use
    import fuzzysearch from 'list.fuzzysearch'

The npm package manager offers great flexibility in terms of where packages can be sourced from. Check out the pertinent documentation for more details.

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

The JavaScript promise remains in limbo, neither resolving nor rejecting, seemingly stuck for unknown reasons

In the process of developing a node script, I encountered an issue where the images were not being ordered according to the calculated score value. The score is determined by a function named getImageScore(), which unfortunately takes a considerable amount ...

Tips on utilizing index and eliminating React Warning: Ensure every child within a list has a distinct "key" prop

Hello, I am encountering an issue where I need to properly pass the index in this component. Can you help me figure out how to do that? Error: react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop ...

React Three Fiber - THREE.BufferGeometry.computeBoundingSphere(): The calculated radius is invalid. It is possible that the "position" attribute contains NaN values causing this issue

Currently, I am working on a website using Reactjs and React Three Fiber for 3D components. Out of the total 3 3D components, 2 are functioning properly. However, one of them suddenly stopped working more than 6 hours ago, and I have been unable to find a ...

Tips on saving the background image URL value into a variable

How can I save the URL value of a background image in a variable? For example: image: url(images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg); I store this value as value = images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg in a variable and then use this variable in an href tag. ...

"Enhance Your Website with Stylish Bootstrap Pop

Hello, I am trying to display a "Loading..." text or spinner image while waiting for the dynamic ajax content to load. Due to the large amount of data that needs to be fetched, it takes approximately 2-3 seconds for the content to fully load. Below is my ...

IE throwing an invalid argument error when making an AJAX request

I have a strange issue with my ajax request - it works perfectly fine in all browsers except for IE, specifically IE10! The error message I am encountering in the IE console is as follows: SCRIPT7002: XMLHttpRequest: Network Error 0x80070057, Invalid arg ...

Unable to reset iframe style height in IE8 using JavaScript

I am encountering an issue with resetting the height of an iframe using JavaScript. Here is the code snippet I am working with: var urlpxExt = document.getElementById('urlPx'); urlpxExt.style.height = "200px"; While this approach works well in m ...

Transforming button properties into a JSON format

I am currently in the process of developing a web application using node.js and mongodb. Within my app, there is a table that dynamically populates data from the database using a loop. I encountered an issue with a delete function that I implemented base ...

Creating a masterpiece on the final piece of paper

As someone who is new to programming with JavaScript and canvas, I have a function called drawLines(canvasIndex, startPosition) that is used to draw lines on a canvas. The function takes in two arguments: canvasIndex, which represents the canvas being draw ...

In JavaScript, how can we determine the structure of an object similar to the str function in R language?

One of the great features in R is the use of the str function, which allows you to examine the structure of an object. For example, you can use it to analyze the structure of a parsed json object like this (I'm using json as an illustration): txt = ...

Exploring the Unpredictable Results of Recursive Functions in JavaScript

Take a look at this recursive code snippet. function calculateFactorial(n) { if (n === 0 || n === 1) { return 1; } else { console.log(calculateFactorial( (n - 1) )); return n * calculateFactorial(n - 1); } } const num = ...

Encountering a "Command Not Found" error after a successful installation of AWS Amplify CLI using NPM or CURL

Trying to link my amplify backend with my Next JS application is proving to be challenging. I have installed Amplify CLI globally using both NPM and CURL on Mac OS, but despite successful installations, the "amplify" command is not recognized. Commands At ...

How to properly format an HTML input box for numeric entry and ensure correct formatting of the minus sign

I need assistance with formatting an HTML text input box to only accept numeric values using JavaScript. Specifically, the input should allow digits, a minus sign, or a dot/comma (which will be converted to a dot). However, I want to prevent multiple conse ...

Display chart labels are constantly visible in Vue Chart JS

In my Vue.js JavaScript application, I am working on setting up a chart where I want the labels and chart information to be visible at all times without requiring mouse hover. Check out this image of the chart. This is the code snippet for my chart: < ...

Utilizing an argument in the mapStateToProps function

This component features a counter along with two buttons for incrementing and decrementing the count. class App extends Component { render() { return ( <div className="App"> <h1>{this.props.counter}</h1> <b ...

Showing a text value from a Github Gist on a Hugo website

I seem to be struggling with a seemingly simple task and I can't figure out what I'm missing. Any assistance would be greatly appreciated. I am working on generating a static site using Hugo. On one of my pages, I want to implement a progress ba ...

How can I remove a row from a JavaScript array based on the value of the first item in the row?

Creating an array in JavaScript can be done like this: var myArray = new Array(); myArray.push({ url: urlValue, filename: fileNameValue }); As time goes on, the array will accumulate various items. If you need to delete a specific row based on the urlVal ...

While attempting an AJAX request with jQuery, I encountered the following error message: "Error: ER_SP_UNDECLARED_VAR: Undeclared variable: NaN"

I encountered an issue that says: ` throw err; // Rethrow non-MySQL errors ^ Error: ER_SP_UNDECLARED_VAR: Undeclared variable: NaN ` while attempting a jQuery AJAX get request, and I'm unsure of the cause. My backend is built using node.js a ...

Issues with Angular 8 arise when attempting to use JavaScript after pressing the back button in the browser

While working on my Angular 8 project, everything runs smoothly until I hit the browser's back button. Once I do this, my external JavaScript stops functioning. I have tried using JavaScript in various ways, such as importing, requiring, and putting ...

Programmatically access a list of npm modules installed globally across all environments

Is there a simple way to retrieve a list of all globally installed npm packages using the npm.commands.ls command? ...