Vite 6: Explore possible improvements

[aklinker1]

Feature Request

Two parts:

• fix: Update vite dependency range to support v6 #1215 - Vite 6 worked, no errors
• Look into using the new environment API to improve production build speed (Vite 6: Explore possible improvements #1214 (comment))
• Look into using the new environment API to import entrypoint options during builds
• Look into using the new environment API in dev mode
• Can we replace vite-node with vite module runner?

Is your feature request related to a bug?

N/A

What are the alternatives?

N/A

Additional context

https://vite.dev/blog/announcing-vite6.html

[aklinker1]

Wrote a simple test to see how to use the environment APIs to build multiple bundles at once. The API is much nicer to use but performance wise, vite.createBuilder(...).buildApp() negligibly faster than just running vite.build(...) multiple times with different config (what WXT does). Hard to test on a real extension without actually implementing it in WXT... so we'll have to do that to benchmark it against a real extension with lots of dependencies.

vite-6-demo.zip

Did not profile memory usage nor did I look into changes to dev mode or importing TS files, so still some work to do.

[eMerzh]

Hello,

not sure you had that in your radar, but we were prompted with vite6 dep update, and it seems that the vite (https://wxt.dev/guide/essentials/config/vite.html) method to define the config isn't really type compatible anymore.

properties like resolve alias & plugins
🤔

[aklinker1]

@eMerzh You probably have multiple versions of Vite installed. Type errors like this are usually a sign of this. I just released a new version of WXT that adds support for Vite 6: v0.19.17

Update WXT, then delete your lockfile or run pnpm i vite@latest && pnpm rm vite to update vite. Then run pnpm why vite again to make sure there's only one version installed in the project. If you use a different package manager... there are similar commands, but I don't know them off the top of my head.

[eMerzh]

awesome @aklinker1 it makes the trick 💪 thanks

[remusris]

A vite template for using React Compiler would be a great addition or at least one example showing how to do it.

[aklinker1]

Huh, does the regular react vite plugin not include the compiler already?

[remusris]

You have to turn it on and when I tried turning it on it was giving me errors

https://react.dev/learn/react-compiler

below was my attempt of integrating it

import { defineConfig } from 'wxt';
import { defineRunnerConfig } from 'wxt';
import { defineWxtModule } from 'wxt/modules';

export interface CustomCommandOptions {
  // Add any options your command needs
  commandName?: string;
}

// See https://wxt.dev/api/config.html
export default defineConfig({
  extensionApi: 'chrome',
  modules: ['@wxt-dev/module-react', '@wxt-dev/auto-icons'],
  manifest: {
    permissions: ["activeTab", "scripting", "sidePanel", "storage", "tabs", "history", "unlimitedStorage", "commands"],
    description: "A browser extension that allows you to view and interact with your browser history in a side panel.",
  },
  runner: defineRunnerConfig({
    disabled: true
  }),
  manifestVersion: 3,
  autoIcons: {
    enabled: true,
    grayscaleOnDevelopment: true
  },
  dev: {
    server: {
      port: 5180
    }
  },
  vite: () => ({
    plugins: [
      ['babel-plugin-react-compiler', {}]
    ]
  })
});

This is the error I was getting

Type '() => { plugins: {}[][]; }' is not assignable to type '(env: ConfigEnv) => WxtViteConfig | Promise<WxtViteConfig>'.
  Type '{ plugins: {}[][]; }' is not assignable to type 'WxtViteConfig | Promise<WxtViteConfig>'.
    Type '{ plugins: {}[][]; }' is not assignable to type 'WxtViteConfig'.
      Types of property 'plugins' are incompatible.
        Type '{}[][]' is not assignable to type 'PluginOption[]'.
          Type '{}[]' is not assignable to type 'PluginOption'.
            Type '{}[]' is not assignable to type 'PluginOption[]'.
              Type '{}' is not assignable to type 'PluginOption'.ts(2322)
types.d.ts(407, 5): The expected type comes from property 'vite' which is declared here on type 'UserConfig'

[aklinker1]

@remusris See the README for the react module: https://www.npmjs.com/package/@wxt-dev/module-react

To pass options to the react plugin, like the babel.plugins array, use the react.vite field:

// wxt.config.ts
export default defineConfig({
  modules: ['@wxt-dev/module-react'],
  react: {
    vite: {
      babel: {
        plugins: [["babel-plugin-react-compiler", { ... }]
      }
    },
  },
});