Running Plugins in an ESM Repo

[ChrisSargent]

Current Behavior

When trying to run some (most) nx commands in a repo that is pure esm, if a file is imported using a .js extension, as required by ESM, the nx command fails with file not found errors, such as:

- apps/storybook-host/.storybook/main.ts: Error: Cannot find module './foo.js'
  Require stack:
  - /Users/xx/Sites/nxfresh/libs/storybook-host/src/index.ts
  - /Users/xx/Sites/nxfresh/apps/storybook-host/.storybook/main.ts
  - /Users/xx/Sites/nxfresh/node_modules/@nx/devkit/src/utils/config-utils.js
  - /Users/xx/Sites/nxfresh/node_modules/@nx/storybook/src/plugins/plugin.js
  - /Users/xx/Sites/nxfresh/node_modules/@nx/storybook/plugin.js
  - /Users/xx/Sites/nxfresh/node_modules/nx/src/project-graph/plugins/load-resolved-plugin.js
  - /Users/xx/Sites/nxfresh/node_modules/nx/src/project-graph/plugins/isolation/plugin-worker.js

Expected Behavior

I would expect to be able to run all Nx commands in a pure ESM / Typescript repo.

GitHub Repo

https://github.com/noah-labs/nx-esm-problem/tree/main

Steps to Reproduce

1. clone the repo above
2. run yarn install
3. run yarn nx reset && yarn nx run @nxfresh/storybook-host:storybook --verbose
4. see error output

Nx Report

Node           : 20.19.0
OS             : darwin-arm64
Native Target  : aarch64-macos
yarn           : 4.9.1

nx                     : 20.8.0
@nx/js                 : 20.8.0
@nx/jest               : 20.8.0
@nx/eslint             : 20.8.0
@nx/workspace          : 20.8.0
@nx/cypress            : 20.8.0
@nx/devkit             : 20.8.0
@nx/eslint-plugin      : 20.8.0
@nx/module-federation  : 20.8.0
@nx/playwright         : 20.8.0
@nx/react              : 20.8.0
@nx/storybook          : 20.8.0
@nx/web                : 20.8.0
@nx/webpack            : 20.8.0
typescript             : 5.7.3
---------------------------------------
Registered Plugins:
@nx/js/typescript
@nx/react/router-plugin
@nx/webpack/plugin
@nx/eslint/plugin
@nx/playwright/plugin
@nx/storybook/plugin
---------------------------------------
Cache Usage: 0.00 B / 46.04 GB
---------------------------------------
⚠️ Unable to construct project graph.
Failed to process project graph.
     - apps/storybook-host/.storybook/main.ts: Error: Cannot find module './foo.js'
  Require stack:
  - /Users/noone/nxfresh/libs/storybook-host/src/index.ts
  - /Users/noone/nxfresh/apps/storybook-host/.storybook/main.ts
  - /Users/noone/nxfresh/node_modules/@nx/devkit/src/utils/config-utils.js
  - /Users/noone/nxfresh/node_modules/@nx/storybook/src/plugins/plugin.js
  - /Users/noone/nxfresh/node_modules/@nx/storybook/plugin.js
  - /Users/noone/nxfresh/node_modules/nx/src/project-graph/plugins/load-resolved-plugin.js
  - /Users/noone/nxfresh/node_modules/nx/src/project-graph/plugins/isolation/plugin-worker.js
      at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
      at Function.Module._resolveFilename (/Users/noone/nxfresh/node_modules/tsconfig-paths/src/register.ts:115:36)
      at Function.Module._load (node:internal/modules/cjs/loader:1043:27)
      at Module.require (node:internal/modules/cjs/loader:1298:19)
      at require (node:internal/modules/helpers:182:18)
      at Object.<anonymous> (/Users/noone/nxfresh/libs/storybook-host/src/index.ts:3:16)
      at Module._compile (node:internal/modules/cjs/loader:1529:14)
      at Module._compile (/Users/noone/nxfresh/node_modules/pirates/lib/index.js:129:24)
      at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
      at Object.newLoader (/Users/noone/nxfresh/node_modules/pirates/lib/index.js:134:7)
      Error: Cannot find module './foo.js'
      Require stack:
      - /Users/noone/nxfresh/libs/storybook-host/src/index.ts
      - /Users/noone/nxfresh/apps/storybook-host/.storybook/main.ts
      - /Users/noone/nxfresh/node_modules/@nx/devkit/src/utils/config-utils.js
      - /Users/noone/nxfresh/node_modules/@nx/storybook/src/plugins/plugin.js
      - /Users/noone/nxfresh/node_modules/@nx/storybook/plugin.js
      - /Users/noone/nxfresh/node_modules/nx/src/project-graph/plugins/load-resolved-plugin.js
      - /Users/noone/nxfresh/node_modules/nx/src/project-graph/plugins/isolation/plugin-worker.js
          at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
          at Function.Module._resolveFilename (/Users/noone/nxfresh/node_modules/tsconfig-paths/src/register.ts:115:36)
          at Function.Module._load (node:internal/modules/cjs/loader:1043:27)
          at Module.require (node:internal/modules/cjs/loader:1298:19)
          at require (node:internal/modules/helpers:182:18)
          at Object.<anonymous> (/Users/noone/nxfresh/libs/storybook-host/src/index.ts:3:16)
          at Module._compile (node:internal/modules/cjs/loader:1529:14)
          at Module._compile (/Users/noone/nxfresh/node_modules/pirates/lib/index.js:129:24)
          at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
          at Object.newLoader (/Users/noone/nxfresh/node_modules/pirates/lib/index.js:134:7)

Failure Logs

Failed to process project graph.
     - apps/storybook-host/.storybook/main.ts: Error: Cannot find module './foo.js'
  Require stack:
  - /Users/noone/nxfresh/libs/storybook-host/src/index.ts
  - /Users/noone/nxfresh/apps/storybook-host/.storybook/main.ts
  - /Users/noone/nxfresh/node_modules/@nx/devkit/src/utils/config-utils.js
  - /Users/noone/nxfresh/node_modules/@nx/storybook/src/plugins/plugin.js
  - /Users/noone/nxfresh/node_modules/@nx/storybook/plugin.js
  - /Users/noone/nxfresh/node_modules/nx/src/project-graph/plugins/load-resolved-plugin.js
  - /Users/noone/nxfresh/node_modules/nx/src/project-graph/plugins/isolation/plugin-worker.js
      at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
      at Function.Module._resolveFilename (/Users/noone/nxfresh/node_modules/tsconfig-paths/src/register.ts:115:36)
      at Function.Module._load (node:internal/modules/cjs/loader:1043:27)
      at Module.require (node:internal/modules/cjs/loader:1298:19)
      at require (node:internal/modules/helpers:182:18)
      at Object.<anonymous> (/Users/noone/nxfresh/libs/storybook-host/src/index.ts:3:16)
      at Module._compile (node:internal/modules/cjs/loader:1529:14)
      at Module._compile (/Users/noone/nxfresh/node_modules/pirates/lib/index.js:129:24)
      at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
      at Object.newLoader (/Users/noone/nxfresh/node_modules/pirates/lib/index.js:134:7)
      Error: Cannot find module './foo.js'
      Require stack:
      - /Users/noone/nxfresh/libs/storybook-host/src/index.ts
      - /Users/noone/nxfresh/apps/storybook-host/.storybook/main.ts
      - /Users/noone/nxfresh/node_modules/@nx/devkit/src/utils/config-utils.js
      - /Users/noone/nxfresh/node_modules/@nx/storybook/src/plugins/plugin.js
      - /Users/noone/nxfresh/node_modules/@nx/storybook/plugin.js
      - /Users/noone/nxfresh/node_modules/nx/src/project-graph/plugins/load-resolved-plugin.js
      - /Users/noone/nxfresh/node_modules/nx/src/project-graph/plugins/isolation/plugin-worker.js
          at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
          at Function.Module._resolveFilename (/Users/noone/nxfresh/node_modules/tsconfig-paths/src/register.ts:115:36)
          at Function.Module._load (node:internal/modules/cjs/loader:1043:27)
          at Module.require (node:internal/modules/cjs/loader:1298:19)
          at require (node:internal/modules/helpers:182:18)
          at Object.<anonymous> (/Users/noone/nxfresh/libs/storybook-host/src/index.ts:3:16)
          at Module._compile (node:internal/modules/cjs/loader:1529:14)
          at Module._compile (/Users/noone/nxfresh/node_modules/pirates/lib/index.js:129:24)
          at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
          at Object.newLoader (/Users/noone/nxfresh/node_modules/pirates/lib/index.js:134:7)

Package Manager Version

yarn 4.9.1

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

Issue comes from this line: https://github.com/nrwl/nx/blob/21.0.0-beta.4/packages/devkit/src/utils/config-utils.ts#L82.

[ChrisSargent]

I just realised this can be reproduced without importing a lib - simply trying to import a file in the main.ts file with a .js extension will produce the same failure.

I'm wondering if Nx's expectation is that we'd use allowImportingTsExtensions in the tsconfig? And related to: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-7.html#path-rewriting-for-relative-paths

[gperdomor]

could be related to this? #30714