Path aliases with Vite

digitalextremist · October 9, 2024, 9:17pm

I am using meteor-vite and there is an issue filed for this question, in case it is a bug: Entry points not using Vite.resolve.alias definitions. · Issue #198 · JorgenVatle/meteor-vite · GitHub

And I notice a loosely related topic here: [Solved] Absolute path within meteor packages

Is there an accepted practice for using path aliases in import statements?

Both in the client and server applications, I would like to use aliases like @store/ or @ui/ as aliases, which works great with Vite ( see issue linked above for configuration file as it stands ) and at most required including duplicate references to match that in tsconfig.js ( also shown in the issue linked )

This seemed to be working before, and then something changed. Not sure whether it was me, or Meteor or Vite or meteor-vite or what. Opening up as general question with that in mind.

Thanks World!

digitalextremist · October 9, 2024, 11:13pm

@jorgenvatle resolved this! Thanks so much to the ninja

github.com/JorgenVatle/meteor-vite

Entry points not using Vite.resolve.alias definitions.

opened 02:49AM - 09 Oct 24 UTC

closed 11:12PM - 09 Oct 24 UTC

digitalextremist

Using these path alias definitions in `vite.config.js` at `resolve.alias {}` …![image](https://github.com/user-attachments/assets/1b3e4333-2a0a-445b-a4f6-00a441543dfc) And using these `paths` in `tsconfig.js` ![image](https://github.com/user-attachments/assets/e9dd04eb-5750-4063-bc36-ff27c7f2f6c3) And then these `mainModule` entries in `package.json` ![image](https://github.com/user-attachments/assets/02911bb4-680a-4346-9e0b-17288d04839b) When using `meteor` with or without `--settings <file path>` I then get `Unable to resolve some modules:` for every `import` using a path alias, such as `@imports/path/file` And this will be true for `web.browser` and `web.browser.legacy` for the client application, which will be the same errors; then also `os.linux.x86_64` for the server application. `meteor` will then suggest using `meteor npm install --save` on each entry, as if it were not an alias but a potential package. Then `Starting Vite server...` will arise, and it wil crash with `Error: Cannot find module` at the first use of an alias. --- This seemed to work previously, but something looks like it changed. Are we not allowed to use alias paths, or am I doing something wrong, or was there a breaking change?

Solution is using .babelrc with module-resolver