Webpack is having trouble resolving modules from the subdirectory of a package

Question

Webpack is having trouble resolving modules from the subdirectory of a package

I am facing an issue with a package I am working on, which is structured as follows:

- lib/
-- moduleA/
---- index.js
-- moduleB/
---- index.js
- src/
-- moduleA/
-- moduleB/

The package.json file specifies:

"main": "./lib"

When trying to import a specific module from this package in another project like so:

import moduleA from '@scope/packageA/moduleA';

I encounter an error message from Webpack:

Module not found: Error: Can't resolve '@scope/packageA/moduleA'

Strangely though, importing directly from lib works fine:

import moduleA from '@scope/packageA/lib/moduleA;

This raises the question why the Webpack isn't resolving the module as expected based on the package's main entry and supposed hierarchy flexibility for imports.

javascript npm webpack ecmascript-6 babeljs

Answer 1

Answer №1

While I may be a bit behind, here is a potential solution for those in need:

To specify which directories correspond to certain modules, you can utilize the exports field within your package.json. For instance, consider implementing something similar to the following:

// package.json
{
  ...
  "exports": {
    "./moduleA": "./lib/moduleA/index.js",
    "./moduleB": "./lib/moduleB/index.js",
  },
}

By doing so, Node will correctly resolve the package import and adjust it from:

import moduleA from '@scope/packageA/moduleA';

to:

import moduleA from '@scoppe/packageA/lib/moduleA/index.js';

It's essential to note that this method is applicable for Node versions 12 and above; prior versions will default to using the main field as the package entry point.

Furthermore, there are additional possibilities with specifying entry points conditionally and utilizing them for different Javascript formats (such as CommonJS and EMS). For further information, refer to the documentation.

Answer 2

While I may be a bit behind, here is a potential solution for those in need:

To specify which directories correspond to certain modules, you can utilize the exports field within your package.json. For instance, consider implementing something similar to the following:

// package.json
{
  ...
  "exports": {
    "./moduleA": "./lib/moduleA/index.js",
    "./moduleB": "./lib/moduleB/index.js",
  },
}

By doing so, Node will correctly resolve the package import and adjust it from:

import moduleA from '@scope/packageA/moduleA';

to:

import moduleA from '@scoppe/packageA/lib/moduleA/index.js';

It's essential to note that this method is applicable for Node versions 12 and above; prior versions will default to using the main field as the package entry point.

Furthermore, there are additional possibilities with specifying entry points conditionally and utilizing them for different Javascript formats (such as CommonJS and EMS). For further information, refer to the documentation.

Webpack is having trouble resolving modules from the subdirectory of a package

Answer №1

Similar questions

The ReactJS input box is stubbornly rejecting all input

Having trouble initiating an Angular 5 project: encountering npm ERR! with code ECONNRESET

Illustrator export script for efficient saving of images as web-friendly jpg files

Error encountered while making an http get request for a node that returns JSON

Using an iframe containing a link to trigger the opening of a colorbox in the

Is it possible to use Google Analytics to track touch interactions?

Display a single component from a panel with Angularjs

having difficulty sending a post request with Angular

What is causing my Mongo database to be unresponsive during my initial request?

A method for categorizing every tier of JSON data based on a shared attribute

Error encountered with CORS in a Socket.io Express HTTP server backend

Click on the React JS infinite render component to load more items

Extending a line with additional characters

Ensuring Radiobuttons are Selected on a Page After Clicking the Submit Button

Prevent users from copying and pasting text or right-clicking on the website

The data from my ajax code is not being successfully transmitted to the database

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

Accessing the Document Id in Mongoose Model Methods Using Pre / Save Middleware

Determining the elapsed time using Momentjs

XMLHTTPRequest is experiencing issues with displaying the progress bar