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/vite@6.1.0_1/node_modules/vite/dist/node/index").Plugin<any>' is not assignable to type 'import("/Users/kuchta/Projects/radixverse/node_modules/.deno/vite@6.1.0/node_modules/vite/dist/node/index").Plugin<any>'.
            Types of property 'hotUpdate' are incompatible.
              Type 'import("/Users/kuchta/Projects/radixverse/node_modules/.deno/rollup@4.34.6/node_modules/rollup/dist/rollup").ObjectHook<(this: HotUpdatePluginContext, options: import("/Users/kuchta/Projects/radixverse/node_modules/.deno/vite@6.1.0_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/rollup@4.34.6/node_modules/rollup/dist/rollup").ObjectHook<(this: HotUpdatePluginContext, options: import("/Users/kuchta/Projects/radixverse/node_modules/.deno/vite@6.1.0/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/vite@6.1.0_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/vite@6.1.0/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/vite@6.1.0/node_modules/vite/dist/node/index").Environment' is not assignable to type 'import("/Users/kuchta/Projects/radixverse/node_modules/.deno/vite@6.1.0_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:tailwindcss@4.0.6
Add npm:@tailwindcss/vite@4.0.6

$ 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

[knd775]

This is happening to us in a fully up to date sveltekit project using vite 6.2.0 and tailwind 4.0.9. We're using node (v22.12.0)

[nalejandroveron]

Same when using in a fresh Tanstack Start project, setting the plugin in app.config.ts

[IanVS]

I am also struggling with this. It's obviously a mismatch between versions, but I'm not entirely sure versions of what. I'm writing a vite plugin, and I've made sure that the version of vite and rollup are the same in the plugin and the project using it, but still getting this TS error. I've noticed that when I use import type {Plugin} from 'rollup' it works fine, but not when importing from vite. Even though both vite are 6.2...

Edit: sorry, I thought this was the vite repo. My experience is probably not relavant here.

But I would suggest that anyone having trouble with the tailwind plugin even after updating everything to latest, try removing node_modules and your lockfile, and re-installing. I have a feeling there's a transitive dep issue.

[Robin-Hoodie]

But I would suggest that anyone having trouble with the tailwind plugin even after updating everything to latest, try removing node_modules and your lockfile, and re-installing. I have a feeling there's a transitive dep issue.

Tried this - didn't work unfortunately
Installed the latest vite@6.2.2 version.
Why is this issue closed?

[ShaunLWM]

Just started a project with Vite and had the same issue

  "dependencies": {
    "@tailwindcss/vite": "^4.0.15",
    "@workspace/ui": "workspace:*",
    "lucide-react": "^0.483.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss": "^4.0.15"
  },
  "devDependencies": {
    "@types/node": "^22.13.11",
    "@types/react": "^19.0.12",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "globals": "^15.15.0",
    "react-scan": "^0.3.3",
    "typescript": "~5.7.3",
    "vite": "^6.2.2"
  }

Used npx npkill, deleted all node_modules in my monorepo, pnpm i again, restart ts-server and lint error is gone.

[teddythinh]

After upgrading Vite, closing and reopening the code editor works for me. I use VS Code.