The CJS build of Vite’s Node API is deprecated

If you’re upgrading an exiting Vue project that uses Vite you may have run into this warning when starting the dev server:

The CJS build of Vite's Node API is deprecated. 

The provided link gives you a great step by step on how to resolve the issue. For most projects it’s as simple as adding the following to your package.json file:

"type": "module",

However, some projects have defined their import alias as follows in vite.config.js. This uses the Common JS path.resolve and is therefore incompatible with ESM.

alias:{
  '@' : path.resolve(__dirname, './src')
},

In fact, this is how we originally suggested users enable the import aliases in this article (though we’ve since updated it to the proper ESM syntax).

In order to work with the latest version of Vite you MUST remove the common JS syntax otherwise your aliases won’t work. Checkout this article for the updated syntax to ensure your import aliases continue to work!

Also, if you are interested in learning more about how to utilize Vite for your own Vue.js projects, checkout our course Rapid Development with Vite. In the course, we talk about all kinds of Vite features like: CSS modules, glob imports, CSS pre-processors, images with Vite, and more!