vite: Type 'DevEnvironment' is not assignable to type 'Environment'.

[kuchta]

Simplest possible vite configuratin has TS error:

vite.config.ts:

export default defineConfig({
	base: process.env.BASE_URL ?? '/',
	build: {
		sourcemap: true,
	},
	plugins: [
		tailwindcss(),
	]
}

Vite now uses PluginOption instead of Plugin, so maybe the plugin needs some update.

No overload matches this call.
  The last overload gave the following error.
    Type 'Plugin<any>[]' is not assignable to type 'PluginOption'.
      Type 'Plugin<any>[]' is not assignable to type 'PluginOption[]'.
        Type 'Plugin<any>' is not assignable to type 'PluginOption'.
          Type 'import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]_1/node_modules/vite/dist/node/index").Plugin<any>' is not assignable to type 'import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]/node_modules/vite/dist/node/index").Plugin<any>'.
            Types of property 'hotUpdate' are incompatible.
              Type 'import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]/node_modules/rollup/dist/rollup").ObjectHook<(this: HotUpdatePluginContext, options: import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]_1/node_modules/vite/dist/node/index").HotUpdateOptions) => void | ... 1 more ... | Pr...' is not assignable to type 'import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]/node_modules/rollup/dist/rollup").ObjectHook<(this: HotUpdatePluginContext, options: import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]/node_modules/vite/dist/node/index").HotUpdateOptions) => void | ... 1 more ... | Prom...'.
                Type '(this: HotUpdatePluginContext, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<void | EnvironmentModuleNode[]>' is not assignable to type 'ObjectHook<(this: HotUpdatePluginContext, options: HotUpdateOptions) => void | EnvironmentModuleNode[] | Promise<void | EnvironmentModuleNode[]>> | undefined'.
                  Type '(this: HotUpdatePluginContext, options: import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]_1/node_modules/vite/dist/node/index").HotUpdateOptions) => void | ... 1 more ... | Promise<...>' is not assignable to type '(this: HotUpdatePluginContext, options: import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]/node_modules/vite/dist/node/index").HotUpdateOptions) => void | ... 1 more ... | Promise<...>'.
                    The 'this' types of each signature are incompatible.
                      Type 'HotUpdatePluginContext' is not assignable to type 'HotUpdatePluginContext'. Two different types with this name exist, but they are unrelated.
                        The types of 'environment.pluginContainer.environment' are incompatible between these types.
                          Type 'import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]/node_modules/vite/dist/node/index").Environment' is not assignable to type 'import("/Users/kuchta/Projects/radixverse/node_modules/.deno/[email protected]_1/node_modules/vite/dist/node/index").Environment'.
                            Type 'DevEnvironment' is not assignable to type 'Environment'.

[philipp-spiess]

@kuchta Hey! I created a frewsh Vite 6.1.0 setup and added our plugin with the latest version and can not reproduce this issue. Can you please attach a repro for this?

[kuchta]

@philipp-spiess Hi Philipp, it seems like it's doing in projects initialized by deno.

$ deno -A npm:create-vite
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript

Scaffolding project in /Users/kuchta/Projects/vite-project...

Done. Now run:

  cd vite-project
  deno install
  deno run dev

$ cd vite-project

$ deno i

$ deno add npm:tailwindcss npm:@tailwindcss/vite
Add npm:[email protected]
Add npm:@tailwindcss/[email protected]

$ deno check vite.config.ts 
Check file:///Users/kuchta/Projects/vite-project/vite.config.ts
TS2769 [ERROR]: No overload matches this call.
  The last overload gave the following error.
    Type 'Plugin<any>[]' is not assignable to type 'PluginOption'.
      Type 'Plugin<any>[]' is not assignable to type 'PluginOption[]'.
        Type 'Plugin<any>' is not assignable to type 'PluginOption'.
...

[corentinclichy]

I have the same issue on on Adonis application (with inertia)

[Avaray]

Same in Astro.

Updating is not solving this issue in Astro.

[kuchta]

Seems like create-vite is not installing latest versions:

  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.2",
    "eslint": "^9.11.1",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.9.0",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.7.0",
    "vite": "^5.4.8"
  }

After updating to latest versions it's OK

$ deno outdated -u --latest
Updated 5 dependencies:
 - npm:@types/react     18.3.18 -> 19.0.9
 - npm:@types/react-dom  18.3.5 -> 19.0.3
 - npm:react             18.3.1 -> 19.0.0
 - npm:react-dom         18.3.1 -> 19.0.0
 - npm:vite              5.4.14 ->  6.1.0

$ deno check vite.config.ts 
Check file:///Users/kuchta/Projects/vite-project/vite.config.ts

[kuchta]

FYI, deno doesn't run latest versions unless specifically instructed to do so by --reload param denoland/deno#28148