Vite – can't import TypeScript paths in vite.config files

[tomekbuszewski]

Current Behavior

When trying to import @my/lib inside vite.config.ts and run "test", I am getting an error saying

NX Cannot find module '@myorg/mylib'

When I try to run "build", I am getting

NX Unexpected token 'export'

When using relative imports, all works fine.

Expected Behavior

Import paths are allowed in vite.config.ts.

GitHub Repo

https://github.com/tomekbuszewski/nx-vite-problem

Steps to Reproduce

1. Create an app or a lib using Vite;
2. Create another one (to be able to link these two);
3. Inside an app's vite.config, import something using TS paths (@my/lib);
4. Run tests or build.

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 16.17.0
   OS     : darwin arm64
   npm    : 8.15.0
   Hasher : Native
   
   nx                 : 16.1.4
   @nx/js             : 16.1.4
   @nx/linter         : 16.1.4
   @nx/workspace      : 16.1.4
   @nx/cypress        : 16.1.4
   @nx/devkit         : 16.1.4
   @nx/eslint-plugin  : 16.1.4
   @nx/react          : 16.1.4
   @nrwl/tao          : 16.1.4
   @nx/vite           : 16.1.4
   @nx/web            : 16.1.4
   typescript         : 5.0.4

Failure Logs

No response

Operating System

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

Additional Information

No response

[mandarini]

Linking this issue here.

[mandarini]

@danr-za I remember we had solved this, but now it fails due to the export issue. Have you noticed this on your end, too?

[ghost]

hmm not that I am aware of yet. I can check

[tomekbuszewski]

@mandarini Maybe it'll help you if I add that no files outside of 'src' are being treated with TypeScript. Just tried having Tailwind config import my TS theme (relative import) and it also fails.

[mandarini]

That's not fixed yet, it's partly fixed. Not sure how to fix atm, will revisit.

[mandarini]

Updated repro: https://github.com/mandarini/vite-paths

[mandarini]

Update on this issue:

@jaysoo looked into it as well, and I present here the findings:

This is an issue with monorepos in general, not just Nx. There's an open, existing issue, on the Vite side: vitejs/vite#5370

Because of this line here:

{ filter: /^[^.].*/ },

If your import starts with . then it is recognized as relative and will be transpiled prior to loading. Otherwise, it is treated as external and not transpiled. Since tsconfig-paths maps to absolute paths, vite is trying to import them as normal CJS modules, so we're getting the Unexpected token 'export' error.

@patak-dev mentioning you here, just in case! :)

[ghost]

Thanks for the update @mandarini

[amitgk1]

Hi, I don't really know whether to comment in this PR or in #17844
so if you'd prefer me to move this comment there or to a new issue - I'll be more that happy to 😄

I looked at the open PR in vite's repo, and it definitely would fix my issue if they would fix it, but I have the following scenario:

I'm working with NX to create an integrated monorepo where I have (for now) a single app and a single library.
the app is powered by the @nx/vite plugin and the library ideally would have been built from source but in the current situation, it's built using tsc (doesn't really matter).
the library holds two important things:

1. a vite plugin that is controlling the proxy behavior of the app in dev-server - it uses a routes config that is used in the proxy definition and in the app itself where you would invoke the request
2. an env variables schema validation using zod that enriches process.env (used for the proxy itself and nginx proxy in prod [nginx missing from demo]) and import.meta.env (for env variables exposed to the browser for both prod and dev) separately

this all works fine and well in build mode - I passed the buildFromSource option as false, forcing my lib to be built when the app it being built (nx is awesome BTW), but in dev mode, it looks like it fails to use the tmp folder with the generated tsconfig

you can look at the demo here

I'll add that type safety is incredibly important to me, so if you have a type safe way to solve my issue that goes around this vite problem, I'm all ears!

thanks in advance!

[mandarini]

@barbados-clemens mentioning you here, just in case, for above comment!

[barbados-clemens]

@amitgk1 Correctly resolving built artifacts or uncompiled source code would be fixed in this PR.
#17844

[barbados-clemens]

Oh I see, this is the ts file within the vite config not a source file importing the ts file. I'm not too sure. Let me see if it's semi related to the PR I mentioned above.

Update: I didn't see anything obvious since the plugin resolved during vite lifecycles, and this error is happening before vite loads and runs the plugins.

[amitgk1]

@barbados-clemens exactly, so it doesn't seem like it is vite's issue anymore, but NX's - of course, only because of the bypass (using buildFromSource: false and building the plugin), but still.
do you see any way to solve this?
I assume the problem is caused by a slight difference between the build and the dev-server implementation in the @nx/vite executors, probably the linking of the tmp folder before passing the ball to vite.

I'll admit, I've had a hard time finding one so I might be totally wrong - I hope you can find the real cause and help me 🤞

[Coly010]

Unfortunately this a limitation from how Vite loads config files.

It uses a resolver to transform import paths to file system paths, but it never loads a tsconfig file to assess for it being a path alias defined in a tsconfig file.

Therefore this is something outside of our control unfortunately. An issue is open on the vite repo about this issue already: vitejs/vite#5370

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.