What is the process for importing module dependencies from other npm dependencies?

I have a question about building an NPM module with specific behavior. My goal is to have all dependencies work perfectly in the project once installed and imported.

Here's what I currently have:

https://i.sstatic.net/WZvME.png

In my "my-module" project, I have the desired dependency modules with their specific versions.

On the other hand, I have a project that imports these modules as shown below.

Within my project, I aim to write code like this and successfully run it:

import {Calendar} from 'primereact/calendar';

How can I address this issue?

Thank you in advance!

EDIT: The package.json for my project looks like this

{
  "name": "my-project",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next src",
    "build": "next build src",
    "start": "next start src"
  },
  "license": "ISC",
  "dependencies": {
    "next": "^9.0.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "@ascope/my-module": "file://../my-module"
  }
}

And the package.json for my-module:

{
  "name": "my-module",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "test": "exit 1"
  },
  "license": "ISC",
  "bundledDependencies": [
    "primereact",
    "rxjs"
  ],
  "dependencies": {
    "primereact": "^3.1.8",
    "rxjs": "^6.5.2"
  },
  "peerDependencies": {
    "primereact": "^3.1.8",
    "rxjs": "^6.5.2"
  }
}

Answer №1

Both of the software packages require the primereact dependency. Once you execute an install command on the main package, the primereact dependency will be moved up, provided there is a version that satisfies both dependencies.

To understand more about this process, refer to the NPM install algorithm

Consider this package{dep} structure: A{B,C}, B{C}, C{D}. The algorithm results in:

A
+-- B
+-- C
+-- D

In this scenario, the dependency from B to C is resolved because A already caused C to be installed at a higher level. D remains installed at the top level as no conflicts arise.


If we have A{B,C}, B{C,D@1}, C{D@2}, the algorithm produces:

A
+-- B
+-- C
   `-- D@2
+-- D@1

The reason why C now installs D@2 privately is due to B's installation of D@1 at the top level. Although the algorithm is deterministic, different trees may result if two dependencies are requested for installation in a varied order.

You also have the option to execute npm dedupe to manage duplicates.

Answer №2

When working with node.js, it is best practice to explicitly define the dependencies needed for your application.

How to Require a Dependency from another Dependency in Node Modules

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

Encountering error code ENOENT when attempting to install node packages, with the syscall rename failing due to errno -405

Struggling with npm ERR while installing node packages such as mongoose, mongodb, and @angular/cli. Express package was successfully installed, but the others are causing errors during installation. https://i.sstatic.net/vpgQq.jpg Node and npm versions: ...

What is the best way to update my component when the selected value is changed?

Currently, I am facing an issue with my map component. It plots polyline data based on the option selected from the select menu component. The problem arises when I change the value in the select menu and click the play button for the animation. Instead of ...

What is the best way to simulate our services for controller testing?

Currently delving into angular js and experimenting with testing a controller. Here is the service I am using: angular.module('test'){ service.getAllServices = function() { var fullPath = url var deferre ...

Retrieving the initial entry from a JavaScript ES2015 Map

I am working with a Map structured as follows: const m = new Map(); m.set('key1', {}) . m.set('keyN' {}) The Map may contain one or multiple items. I am wondering if there is a way to retrieve the first item by index, without using m. ...

Issue with implementing setTimeout on await fetch() result

I'm trying to figure out how to add a setTimeout to my request response when using await fetch. Currently, each response is being sent to a DIV in the HTML, but I want to introduce a delay of 5 seconds before each response appears. I attempted this s ...

Encountered an error while using npm install --legacy-peer-deps: Debug Failure. SyntaxKind: Unknown went unhandled

When attempting to execute the command npm install --legacy-peer-deps, I encountered an error. The specific error message is as follows: Error: Error on worker #1: Error: Debug Failure. Unhandled SyntaxKind: Unknown. at pipelineEmitWithHintWorker (port ...

Encountering CORS error with API call in ReactJS, yet successfully receiving response using node.js and Postman

I am currently working on integrating APIs from servers like OwnCloud, Openfire, and Ejabberd that are set up on my local server. My project involves building a ReactJS website. Initially, I attempted to access the API using the fetch() method but encounte ...

Connect hierarchical JSON using AngularJS

I'm facing an issue where I am attempting to bind JSON with two levels to a div using angular.js. The first level binds correctly, but the second level does not seem to be binding properly. Can someone please provide suggestions on how to adjust the b ...

Override existing Keywords (change false to true)

Are there any ways to overwrite reserved words? It's not something I would typically consider, but it has sparked my curiosity. Is it feasible to set false = true in JavaScript? I've come across instances on different websites where individuals ...

issues with jquery functionality on mobile devices

I'm currently working on a website where I've implemented a jQuery script to dynamically load specific parts of an HTML page with an ID of 'guts' into the main content area. The goal was to keep the menu consistent while only changing t ...

Issue with MUI DataGridPro failing to sort the email field

I am facing an issue with the sorting functionality in the email field while creating a table using MUI DataGridPro. The sorting works fine for all other fields except for the email field. Adding some random text here to ensure my question is published. Pl ...

Creating a curved edge for a shape in React Native can add a stylish and

Issue Description I am working on an app and struggling with styling the bottom navigation bar. It's more complex than what I've done before, especially the curved top edge of the white section and the area between the blue/green circle and the ...

What steps can I take to ensure that WebStorm properly recognizes a package's functions?

No matter what I do, WebStorm refuses to stop throwing inspection warnings when I try to use the JOI package in my node.js project. The code runs fine and there are no runtime errors, but the warning persists. I have updated the package, explicitly install ...

javascript string assignment

Is it possible to conditionally assign a string based on the result of a certain condition, but for some reason, it's not working? var message = ""; if (true) { message += "true"; } else { message += "false" } console.log(message); ...

The Angular $http.jsonp() function can only be executed one time

Upon the first response being successful (alert->done), any subsequent hits will result in an 'error' response. I attempted to resolve this issue by adding some config parameters with 'cache: false', but it still only works the firs ...

Leveraging the package.json file to execute a separate script within the package.json file

Within my project's package.json file, I have a script called npm run script1. Additionally, my project includes a private npm package as a dependency, which contains its own set of scripts in its package.json file, including one named script2. My goa ...

I am trying to display an element upon hovering using Jquery, but unfortunately, despite recognizing the event, it refuses to function as expected

I've been searching for a solution to show a submenu on hover by removing the hidden class that is hiding it. Despite trying various approaches, including using CSS and JavaScript, I haven't been able to make it work. Here is the code snippet I h ...

error TS2304: The term 'MediaRecorder' is not recognized

How can I add audio recording capability to my Angular application using media recorder? Unfortunately, I am encountering the following error: Error TS2304: 'MediaRecorder' cannot be found If anyone knows a solution for this issue, your help w ...

Sorting an array, adding a value to it, and finding the lowest index

I'm currently tackling a JavaScript challenge that requires writing a function to determine the lowest index at which a value (second argument) should be inserted into a sorted array (first argument). For instance, if we call where([1,2,3,4], 1.5), th ...

Top recommendation: Utilizing Typescript to allow a customer to enhance an application using their own tailored code

Our application framework is built on Angular 9, providing customers the ability to customize applications with different fields and layouts. This functionality works smoothly. However, we now face a situation where a customer wants to incorporate special ...