Getting MODULE_NOT_FOUND when using package.json subpath exports

Viewed 419

I'm trying to understand how to use Subpath exports but I don't know what I'm doing wrong.

Using node v17.6.0 (64-bit) + windows10 and I've created a simple project to play around that looks like this:

│   package.json                          
│                                         
├───packages                              
│   └───myorg-common                      
│       │   index.js                      
│       │   package.json                  
│       │                                 
│       └───src                           
│           │   a.js                      
│           │   index.js                  
│           │                             
│           └───b                         
│                   b.js                  
│                                         
└───src                                   
    │   main.js                           
    │                                     
    └───c                                 
            c.js                          
            index.js                      

ROOT

.\package.json

{
  "name": "test_exports",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "workspaces": [
    "packages/*"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "esm": "^3.2.25"
  }
}

.\src\main.js

import * as modroot from "@myorg/common/module_root";
// import * as moda from "@myorg/common/module_a";
// import * as modb from "@myorg/common/module_b";

console.log(modroot);
// console.log(moda);
// console.log(modb);

.\src\c\c.js

export const C="src/c/c.js";

.\src\c\index.js

export * from "./c";

WORKSPACE

.\packages\myorg-common\index.js

export const ROOT="ROOT";

.\packages\myorg-common\package.json

{
  "name": "@myorg/common",
  "version": "1.0.0",
  "description": "",
  "exports": {
    "./module_root": "./src/index.js",
    "./module_a": "./src/a.js",
    "./module_b": "./src/b/b.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

.\packages\myorg-common\src\a.js

export const A="src/a.js";

.\packages\myorg-common\src\index.js

export * from "./a";
export * from "./b/b";

.\packages\myorg-common\src\b\b.js

export const B="src/b/b.js";

QUESTION

After doing npm install in the root path and running node -r esm src\main.js I'll get this error:

D:\test_exports\node_modules\esm\esm.js:1
const __global__ = this;(funct ...TRUNCATED_CONTENT_OR_I_WON'T_BE_ABLE_TO_SUBMIT_TO_SO... default=Jh})]).default;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

D:\test_exports\src\main.js:1
Error: Cannot find module '@myorg/common/module_root'
Require stack:
- D:\test_exports\src\main.js
    at Object.<anonymous> (D:\test_exports\src\main.js:1) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 'D:\\test_exports\\src\\main.js' ]
}

Node.js v17.6.0

Couple of questions:

  • Why am I getting that MODULE_NOT_FOUND error and how to fix it? My main goal is being able to learn how to export all subpackages from my workspaces without having to bundle them (ie: it'd be great to use src content directly from my CRA apps that are using webpack through react-scripts).

  • That huge dump coming from esm, is there any way to avoid all that noise/log? In older versions of node I don't remember the output was so verbose.

Thanks in advance.

1 Answers

It seems that esm is the culprit here and I'm not sure about how to "fix" it. Nonetheless, everything will work fine with webpack/rollup/vite etc. (tested).

To make it work with node, you'd have to either use commonjs to avoid using esm or just switch to ES modules by changing your file extensions to .mjs or by adding "type": "module" in your package.json and then run:

node src/main.mjs

or

node src/main.js

depending on what you decided to go with.

NOTE: if you choose to use ES modules with node, you'd have to add the file extensions to your import/export statements in both cases. e.g.: export * from './a.js' or export * from '.a.mjs'

Related