Migration from v3 ​

Rollup 3 ​

Vite is now using Rollup 3, which allowed us to simplify Vite's internal asset handling and has many improvements. See the Rollup 3 release notes here.

Rollup 3 is mostly compatible with Rollup 2. If you are using custom rollupOptions in your project and encounter issues, refer to the Rollup migration guide to upgrade your config.

Modern Browser Baseline change ​

The modern browser build now targets safari14 by default for wider ES2020 compatibility (bumped from safari13). This means that modern builds can now use BigInt and that the nullish coalescing operator isn't transpiled anymore. If you need to support older browsers, you can add @vitejs/plugin-legacy as usual.

General Changes ​

Encoding ​

The build default charset is now utf8 (see #10753 for details).

Importing CSS as a String ​

In Vite 3, importing the default export of a .css file could introduce a double loading of CSS.

import cssString from './global.css'

This double loading could occur since a .css file will be emitted and it's likely that the CSS string will also be used by the application code — for example, injected by the framework runtime. From Vite 4, the .css default export has been deprecated. The ?inline query suffix modifier needs to be used in this case, as that doesn't emit the imported .css styles.

import stuff from './global.css?inline'

Production Builds by Default ​

vite build will now always build for production regardless of the --mode passed. Previously, changing mode to other than production would result in a development build. If you wish to still build for development, you can set NODE_ENV=development in the .env.{mode} file.

In part of this change, vite dev and vite build will not override process.env.NODE_ENV anymore if it is already defined. So if you've set process.env.NODE_ENV = 'development' before building, it will also build for development. This gives more control when running multiple builds or dev servers in parallel.

See the updated mode documentation for more details.

Environment Variables ​

Vite now uses dotenv 16 and dotenv-expand 9 (previously dotenv 14 and dotenv-expand 5). If you have a value including # or `, you will need to wrap them with quotes.

-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"

For more details, see the dotenv and dotenv-expand changelog.

Advanced ​

There are some changes which only affect plugin/tool creators.

• [#11036] feat(client)!: remove never implemented hot.decline
  • use hot.invalidate instead
• [#9669] feat: align object interface for transformIndexHtml hook
  • use order instead of enforce

Also there are other breaking changes which only affect few users.

• [#11101] feat(ssr)!: remove dedupe and mode support for CJS
  • You should migrate to the default ESM mode for SSR, CJS SSR support may be removed in the next Vite major.
• [#10475] feat: handle static assets in case-sensitive manner
  • Your project shouldn't rely on an OS ignoring file names casing.
• [#10996] fix!: make NODE_ENV more predictable
  • Refer to the PR for an explanation about this change.
• [#10903] refactor(types)!: remove facade type files

Migration from v2 ​

Check the Migration from v2 Guide in the Vite v3 docs first to see the needed changes to port your app to Vite v3, and then proceed with the changes on this page.