Configuring Vite Aliases

Today I learned that Vite aliases require absolute paths.

I'm migrating a very large code base that has been built over the past six years. The frontend is Vue 2 compiled with Webpack. I’m moving things to Vue 3 and Vite.

Today, I spent hours wrestling with some components not loading as dynamic modules but instead was seeing 404s in the console. The path seemed to make sense and couldn’t determine the error.

Then I happened to notice the one commonality between the ones that were 404ing were being imported in parent components using an alias that I had thought was configured properly.

I had the following in my vite.config.js:

resolve: {  
  alias: {    
    vue: '@vue/compat',    
    scss: './static/src/scss',    
    fonts: './static/src/fonts',    
    images: './static/src/images',    
    app: './static/src/js/app',  
  }
},

but it should have been:

resolve: {     
  alias: {         
    vue: '@vue/compat',         
    scss: path.resolve(__dirname, './static/src/scss'),         
    fonts: path.resolve(__dirname, './static/src/fonts'),           
    images: path.resolve(__dirname, './static/src/images'),         
    app: path.resolve(__dirname, './static/src/js/app'),     
  } 
}, 

And sure enough, upon closer inspection of the documentation, it clearly informs me to use absolute paths!