Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vite.config.ts should resolve alias from compilerOptions.paths in tsconfig.json #16718

Closed
4 tasks done
FreeJ1nG opened this issue May 19, 2024 · 11 comments
Closed
4 tasks done

Comments

@FreeJ1nG
Copy link
Contributor

FreeJ1nG commented May 19, 2024

Description

Some plugin configurations require a complex object that might be split across the codebase
For instance, CRXJS Vite Plugin requires a manifest.json file, which might/might not require an (possible aliased) import from another file

Reproduction link here

Right now, vite does not resolve alias paths within vite.config.ts or it's dependencies

- src/
  - some-other-module/
    - foo.ts
  - config/
    - index.ts
- vite.config.ts
- tsconfig.json

Example of such case:

// src/config/index.ts
// throws an error even when tsconfig.json defines compilerOptions.paths properly
import { Something } from "@/some-other-module/foo"; 

...

// vite.config.ts
import { someConfig } from "./src/config";
...

Example of another case:

// vite.config.ts
// throws an error even when tsconfig.json defines compilerOptions.paths properly
import { someConfig } from "@/config";
...

Both cases will throw error when running an instance of the vite server

Suggested solution

Maybe consider using compilerOptions.paths to resolve the imports in vite.config.ts somewhere in the plugin pipeline

Alternative

I'm also considering creating a plugin that creates a workaround, still not 100% sure on how to accomplish this though

Additional context

I've received quite a bit of concern and confusion regarding consumers of vite not being able to utilize aliases in vite.config.ts, and I believe it'd be an issue worth looking at

Validations

Copy link

stackblitz bot commented May 19, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@bluwy
Copy link
Member

bluwy commented May 19, 2024

Currently, TS source code doesn't resolve aliases from compilerOptions.paths too. If we do in the config, it'd need to align with the source code. But the discussions about that are at #6828, and at the moment we don't plan to support it. (However, there's still debate within the team if this is something we actually want)

@FreeJ1nG
Copy link
Contributor Author

If we do in the config, it'd need to align with the source code

What does this mean again?

@bluwy
Copy link
Member

bluwy commented May 19, 2024

If tsconfig alias would work in a config file, it should also work in your source code files for consistency.

@FreeJ1nG
Copy link
Contributor Author

FreeJ1nG commented May 19, 2024

If tsconfig alias would work in a config file, it should also work in your source code files for consistency.

But technically it does work if resolve.alias is added right?

i feel like support for tsconfig paths in vite.config.ts is a different issue that currently doesn't have an easy workaround? (cmiiw)

@FreeJ1nG
Copy link
Contributor Author

FreeJ1nG commented May 19, 2024

However, there's still debate within the team if this is something we actually want

What is the consideration for the vite team to add/not add this feature?

@aelbore
Copy link
Contributor

aelbore commented May 19, 2024

i dont know if this work, but what about execute the vite.config.{ts,js} with esbuild-register or swc-register or maybe ts-node?

@FreeJ1nG
Copy link
Contributor Author

FreeJ1nG commented May 19, 2024

i dont know if this work, but what about execute the vite.config.{ts,js} with esbuild-register or swc-register or maybe ts-node?

The vite config is usually used by vite's server, e.g. executing vite (dev server) or vite build, so it's probably not viable to use ts-node since it's we're not trying to run vite.config.ts in isolation

Unless you mean transpiling vite.config.ts to resolve it's paths first, but that also has it's own problems like files not getting run through the vite plugin pipeline, etc.

CMIIW

@bluwy
Copy link
Member

bluwy commented May 27, 2024

But technically it does work if resolve.alias is added right?

Yes, but resolve.alias has different resolve behaviour compared to tsconfig paths. Tsconfig paths is more lax and could map to more paths than intended, but will still cover the resolve.alias behaviour. If we support tsconfig paths in the config, we're supporting more than what resolve.alias covers.

i feel like support for tsconfig paths in vite.config.ts is a different issue that currently doesn't have an easy workaround? (cmiiw)

I think you can still use relative imports?

What is the consideration for the vite team to add/not add this feature?

There's still mixed opinions about this. My opinion is https://x.com/robpalmer2/status/1770612164396515667 and the result in #6828 (comment). Others think that supporting tsconfig alias would be convenient and rustifying the resolver would solve the performance issue, and that vite-tsconfig-paths had millions of downloads per month (people want it).

@nckirik
Copy link

nckirik commented Jun 15, 2024

having this ability would be great, especially in a nx monorepo.

i usually need to call certain functions in from other packages in the vite.config.ts

@bluwy
Copy link
Member

bluwy commented Jun 17, 2024

Closing this as it's something we don't plan on supporting for now.

@bluwy bluwy closed this as not planned Won't fix, can't repro, duplicate, stale Jun 17, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Jul 2, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants