nx icon indicating copy to clipboard operation
nx copied to clipboard

nxViteTsPaths not resolving modules properly when import contains file extension

Open nzacca opened this issue 10 months ago • 1 comments

Current Behavior

When nxViteTsPaths is used in a vite config, and the project contains imports using file extensions, the build/test/serve fails as the modules cannot be resolved properly.

Ex. import { foo } from "@foo/foo.js";

Expected Behavior

Expect typescript alias paths to be resolved.

GitHub Repo

https://github.com/nzacca/nx-vite-paths-bug

Steps to Reproduce

  1. Clone the repo
  2. npm i
  3. npm test
  4. Note the error: Error: Failed to load url ~foo/foo.js (resolved id: ~foo/foo.js)
  5. Remove the extension from the import in index.spec.ts to see the test pass.

Nx Report

NX   Report complete - copy this into the issue template

Node   : 20.12.2
OS     : win32-x64
npm    : 10.5.2

nx                 : 18.3.1
@nx/js             : 18.3.1
@nx/jest           : 18.3.1
@nx/linter         : 18.3.1
@nx/eslint         : 18.3.1
@nx/workspace      : 18.3.1
@nx/devkit         : 18.3.1
@nx/esbuild        : 18.3.1
@nx/eslint-plugin  : 18.3.1
@nx/node           : 18.3.1
@nrwl/tao          : 18.3.1
@nx/vite           : 18.3.1
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/vite/plugin

Failure Logs

Error: Failed to load url ~foo/foo.js (resolved id: ~foo/foo.js) in C:/dev/nx-vite-paths-bug/index.spec.ts. Does the file exist?
 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:53931:21

Package Manager Version

10.5.2

Operating System

  • [ ] macOS
  • [ ] Linux
  • [X] Windows
  • [ ] Other (Please specify)

Additional Information

The issue seems to stem from here: https://github.com/nrwl/nx/blob/edc79313307b329ab2876db8f5b8b547b2b6d014/packages/vite/plugins/nx-tsconfig-paths.plugin.ts#L172

The config extensions are appended to the path but if the path already has an extension this fails. For example, the import in the repo above resolves to foo.js.js (for each of the extensions). I did try using an empty string as part of the config into nxViteTsPaths but this doesn't work either because the resolved file is actually foo.ts.

nzacca avatar Apr 18 '24 00:04 nzacca

Reproduction has been updated to demo .css issue as well. Note that I left the extensions override commented so that the default .ts / .js case could be tested first.

nzacca avatar Apr 19 '24 18:04 nzacca

Any eta on this fix?

stvh8 avatar Jun 18 '24 15:06 stvh8