"Webpack 无法从包的子目录中解析模块"

Question

I have a package that is being built to a directory named lib . The structure is as follows:

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

and in package.json I specify:

"main": "./lib"

In a different project, I'm trying to import a specific module from the package above, as follows:

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

but Webpack is not able to resolve the module, saying:

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

However, it does work if I import directly from lib :

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

Why is this happening? my understanding is the Webpack respects the main entry of the package, and that it should be possible to import from anywhere in the hierarchy starting from the entry point.

Answer 1

I might be a few years late, but if someone needs a possible answer for this:

You can use the exports field inside package.json to define which directories resolve to which modules, using the example in the question, you might want to have something like this:

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

This will help Node to correctly resolve the package import, and "translate" it from:

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

to:

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

Note that this works for Node v12+, any version before will use the main field as the entry for your package.

There's a lot more to this because you can specify entry points conditionally and use them for builds with different Javascript formats (CommonJS and EMS), be sure to check out the documentation