Possibility to define additional node paths

[KingSora]

Clear and concise description of the problem

I've tried to replace my current bundler (rollup) with vite and got stuck with path resolution.
My setup is quite basic. I'm using absolute import paths in my project:

import { something } from 'someDir/someFile'; 

The relative file system path of this import would be ./src/someDir/someFile.

As you can see, I can omit the ./src/ part here. I did this by using the moduleDirectories prop from the @rollup/plugin-node-resolve. Unfortunately vite isn't providing this functionality out of the box which is in my opinion a key feature for every bundler.

Bundlers which are providing this feature:

• Webpack with resolve.modules
• esbuild with nodePaths
• Rollup with @rollup/plugin-node-resolve and moduleDirectories

This is also supported by Eslint with the eslint-import-resolver-node plugin (moduleDirectory option)

Suggested solution

Provide this feature "natively" in the vite config. Something like resolve.moduleDirectories or resolve.nodePaths.

Alternative

It seems like you can use the @rollup/plugin-node-resolve plugin here, but it still feels weird to have this key feature not supported. Additionally since vite is doing quite some resolve logic itself I'm in fear of something not working properly by using the plugin.

You could also use aliases, but is this the "right" way? - With this solution I would be forced to rewrite all of my imports.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

If you set root to fileURLToPath(new URL('./src/', import.meta.url)), it enables you to write ./src/someDir/someFile as /someDir/someFile.
Would this be enough for you?

[KingSora]

@sapphi-red
The documentation says:

Project root directory (where index.html is located). Can be an absolute path, or a path relative to the location of the config file itself.

Which is not the case in my setup.. the root directory is not ./src in my case

[sapphi-red]

May I ask you why you don't want to move root directory to ./src? IIUC moving index.html inside ./src will solve it.

[KingSora]

The question is just whether this property was made for this purpose, or whether its just a side effect of it.

The default vue template for example has this config:

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

To achieve the effect I want to have, its using an alias.

[bluwy]

The equivalent of the rollup/esbuild/webpack feature noted in Vite is resolve.alias. If you want to use someDir/someFile, you'd have to alias someDir (and any directories under src manually). otherwise the more convenient way is to alias src as @ like in the example above. I don't think Vite should provide another way of resolving though.

[KingSora]

@bluwy Thanks for your reply!
As you can imagine, aliasing every directory under ./src manually is not really the way to go for me.
Can you elaborate on why you think Vite shouldn't provide any other way of resolving? (Do you think this should be handled by plugins or do you think the current feature set is enough?)..

I would have even more usecases for the moduleDirectories feature I described.

[bluwy]

Can you elaborate on why you think Vite shouldn't provide any other way of resolving?

Mostly because resolve.alias already covers a lot of base, and Vite is trying to minimize the config surface area.

(Do you think this should be handled by plugins or do you think the current feature set is enough?)..

I think both. And with plugins like https://github.com/Subwaytime/vite-aliases should cover the heavylifting too.

Usually I'd alias src as @ and call it a day, as there's no need to add more complexity for code preference. But the option is always available with plugins 🙂

[bluwy]

Closing as we don't want to introduce new options that do similar things.

[jamesdh]

For those of us trying to make the migration from create-react-app where having absolute imports without any kind of alias was easy and widely used, this is painful. Yes I can create an @ alias but then I'll have to modify our entire codebase to include that where necessary.

I feel like I've gotta be missing something here.

[jamesdh]

For anyone finding this issue while migrating away from CRA, it appears vite-tsconfig-paths solves the issue of alias-free absolute imports.