What is the reason that a peerDependency cannot be imported or required, even if it is already included in the parent module?

When attempting to utilize npm's peerDependencies, I'm encountering issues that do not align with the expected behavior. What could be causing this discrepancy?

The scenario is as follows: I have two modules, mod and plugin, both of which rely on an external module from npm. mod specifies a firm dependency on both plugin and the external module, while the plugin defines a peer dependency to access the version utilized by the parent module.

The file structure appears like this:

~/plugin/package.json:

    {
      "name": "plugin",
      "version": "1.0.0",
      "main": "index.js",
      "peerDependencies": {
        "pad-right": "^0.2.2"
      }
    }

~/plugin/index.js

    var peerDependency = require('pad-right')
    module.exports = 'this is a plugin'

~/mod/package.json:

    {
      "name": "mod",
      "version": "1.0.0",
      "main": "index.js",
      "dependencies": {
        "pad-right": "^0.2.2",
        "plugin": "../plugin"
      }
    }

~/mod/index.js:

    var hardDependency = require('pad-right')
    var plugin = require('plugin')

Based on documentation and examples, it appears that this method should be standard practice for using peer dependencies. Executing npm install in either directory does not yield any errors or warnings.

However, when running webpack within the mod directory, errors such as the following arise:

ERROR in ../plugin/index.js
Module not found: Error: Can't resolve 'pad-right' in '~/plugin'
 @ ../plugin/index.js 1:21-41
 @ ./index.js

This raises the question - why is webpack unable to resolve the require statement within plugin using the peer dependency specified in the parent mod module?

Answer №1

It appears that this particular issue is a unique edge case that only impacts modules referencing each other locally through the file system.

A potential solution involves adding the following code snippet to your webpack configuration:

    resolve: {
        alias: {
            'pad-right': path.resolve('node_modules', 'pad-right'),
        },
    },

This adjustment may help resolve the issue. Alternatively, you could also consider setting resolve.symlinks: false, although this approach only fixed the problem in a simple test scenario rather than in a real-world project.

Read more about this issue in this article

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

Having trouble with ng-click not correctly updating values within ng-repeat

Here is the code snippet: <div ng-repeat="data in products"> <div class=edit ng-click="dataUI.showEdit = true; content = data;"> </div> <div ng-repeat="renew in data.renewed"> <div class=edit ng-click="dataUI ...

Node.js course utilizing MySQL library implementing Object-Oriented Programming concepts

Learning to work with MySQL in Node has been quite challenging for me. I am using the npm package 'mysql' for my project. I am aiming to follow OOP principles by creating an independent class to handle all my DB requests. However, I am facing an ...

Load high-quality gif picture in advance

My task involves a lengthy process that takes several seconds to complete. To make the waiting time more bearable, I have implemented an animated loading page. <style> .modal_gif { display: none; position: fixed; z-index: ...

Utilizing AJAX to retrieve data from a MySQL database upon clicking a button

Hello everyone, I am fairly new to the world of PHP and AJAX, so please bear with me. I am currently attempting to retrieve MySQL results using AJAX. I have made some progress thanks to the information I have gathered from various sources on the internet. ...

Svelte encountered a 404 error message stating: "Page not found: /signup. This page does not exist."

Encountering a frustrating 404 error in my project when trying to sign up. Unable to pinpoint the issue. The main page with the login form looks like this: <script> import supabase from "$lib/external/supa"; import { goto } from "$ ...

Developing distinct state values for assigned objects

I developed a star rating component using Material UI components that is based on a mapped object. However, I am facing an issue where all the star ratings show the same value when clicked. How can I ensure that each star section displays its own value bas ...

What is the best approach for implementing component composition in AngularJS that resembles the render props pattern seen in React?

I'm currently working on developing a grid component in AngularJS that dynamically populates its grid items at runtime, similar to the render props pattern in React. My goal is to achieve this by utilizing the latest AngularJS components API along wi ...

What is the best way to handle texture loading delays in Three.js when using a JSON model?

Currently, I have successfully loaded a JSON model based on AlteredQualia's skinning example. However, I am looking to hide the model until it is fully loaded. In the provided example, the models are displayed before their texture resources finish loa ...

Struggling to make a basic JavaScript prompt function as expected

<html> <title>UniqueTitle</title> <head> <link rel="stylesheet" type="text/css" href="style.css" > <script type="text/javascript"> function modifyDates() { var dates = pr ...

Is it possible to transform all values in arrays to 0s in JavaScript/p5.js during the copying process?

I’m struggling with a simple code where I want to store an array of arrays containing FFT audio data. It seems like there might be a JavaScript issue because when I try to push the array into another array called spectrums, all the values inside spectr ...

JQUERY function fails to execute following the invocation of an array

There is an array named NAME being created. Weirdly, the code seems to be functioning fine for alert('test1') but encounters an issue when reaching alert('test2') $(document).on('submit','form',function() { ...

Acquiring the root URL with the $location service in AngularJS

I am facing a situation where I have a specific URL structure like the one shown below. http://localhost:8080/test#/users/list Upon further investigation, I discovered the following information: $location.url() returns -> "users/list" $location.path( ...

Creating a stunning image carousel in Vue by integrating a photo API: step-by-step guide

Trying to figure out how to create an image carousel in Vue using photos from an API. Currently able to display the photos using: <section class="images"> <img v-for="image in images" :key="image.id":src="image.assets.large.url"> &l ...

Comparative analysis within the JSON object

I have a sample JSON object with the following format: var data = [{"value":"S900_Aru","family":"S400"}, {"value":"S500_Aru","family":"S400"}, {"value":"2610_H","family":"A650"}] The first two values are related to the same f ...

The attempt to run `yarnpkg add --exact react react-dom react-scripts cra-template --cwd /Users/user/Desktop/app` has resulted in

Whenever I attempt to execute npx create-react-app app, an error is thrown stating that yarnpkg add --exact react react-dom react-scripts cra-template --cwd /Users/user/Desktop/app has failed The version of node being used is v16.14.0 The version of npm ...

Accessing router parameters in Vuex actions

Is there a more efficient way to pass router params into Vuex actions for a large form? edit_sport_type({ rootState, state, commit }, event) { const sportName = rootState.route.params.sportName <------- const payload = {sportName, event} ...

Node.js: The REST client delivers the response even before it has been officially returned

I've been experimenting with the node-rest-client REST client in Node.js. However, I'm facing an issue where when I run the code snippet below, it returns a value of null. Oddly enough, the response is printed to the console after that. Is there ...

Interact with waveforms using Web Audio for visualization and engagement

Is there a way to create a JavaScript program that can display a waveform from an audio file using Web Audio and Canvas? I attempted the following code: (new window.AudioContext).decodeAudioData(audioFile, function (data) { var channel = data.getChann ...

What is the best way to style a tooltip in an ASP.NET application using CSS?

protected void grd_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { foreach (TableCell cell in e.Row.Cells) { ...

Re-rendering a Highcharts chart for optimal display

I have implemented Highcharts to showcase a set of data through different types of charts - Area chart, Line chart, and Bar chart. By default, the page loads with the Area chart displayed. Upon clicking a button, I switch to displaying the Line chart and t ...