Importing from src directly instead of from ~/src or @/src

[theodoretliu]

Hi! Thank you so much for this amazing project, it's worked very well for me so far. To make my adoption of Vite more gradual, I wanted to make the Javascript files interpretable by both vite_ruby and webpacker. In my webpacker config right now, imports are done absolutely using src/components/... etc. For vite_ruby I would need to change all of these imports to @/src/components/... which would break backwards compatibility with webpacker (and Jest, as a sidenote).

Is there a way to configure absolute imports so that they don't require a new prefix?

[ElMassimo]

Hi Theodore!

You could add a new alias using resolve.alias for every root folder that you are referencing in the imports. For example:

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      'src/': `${resolve(__dirname, 'app/src')}/`,
    },
  },
})

I don't recommend this though.

A more robust approach would be to define ~/ and @/ aliases in webpack and jest.