astro #15768

seanperez-xyz · 2025-01-23T19:31:14Z

seanperez-xyz
Jan 23, 2025

following the docs https://tailwindcss.com/docs/installation/framework-guides/astro (I am not including the tailwind astro plugin)

// @ts-check
import { defineConfig } from "astro/config";

import cloudflare from "@astrojs/cloudflare";
import tailwindcss from "@tailwindcss/vite";
import partytown from "@astrojs/partytown";
import qwikdev from "@qwikdev/astro";

// https://astro.build/config
export default defineConfig({
  adapter: cloudflare(),
  integrations: [qwikdev(), partytown()],
  vite: { plugins: [tailwindcss()] },
});

its working in the sense of I can use it but there is an error in the config.mjs vite plugins

  vite: { plugins: [tailwindcss()] },

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("path/to/node_modules/vite/dist/node/index").Plugin<any>' is not assignable to type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").Plugin<any>'.
Types of property 'apply' are incompatible.
Type '"build" | "serve" | ((this: void, config: import("path/to/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined' is not assignable to type '"build" | "serve" | ((this: void, config: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined'.
Type '(this: void, config: UserConfig, env: ConfigEnv) => boolean' is not assignable to type '"build" | "serve" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean) | undefined'.
Type '(this: void, config: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").ConfigEnv) => boolean' is not assignable to type '(this: void, config: import("path/to/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/vite/dist/node/index").ConfigEnv) => boolean'.
Types of parameters 'config' and 'config' are incompatible.
Type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").UserConfig' is not assignable to type 'import("path/to/node_modules/vite/dist/node/index").UserConfig'.
Types of property 'plugins' are incompatible.
Type 'import("path/to/node_modules/vite/dist/node/index").PluginOption[] | undefined' is not assignable to type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").PluginOption[] | undefined'.
Type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").PluginOption[]' is not assignable to type 'import("path/to/node_modules/vite/dist/node/index").PluginOption[]'.
Type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").PluginOption' is not assignable to type 'import("path/to/node_modules/vite/dist/node/index").PluginOption'.
Type 'Plugin<any>' is not assignable to type 'PluginOption'.
Type 'import("path/to/node_modules/astro/node_modules/vite/dist/node/index").Plugin<any>' is not assignable to type 'import("path/to/node_modules/vite/dist/node/index").Plugin<any>'.
Types of property 'apply' are incompatible.
Type '"build" | "serve" | ((this: void, config: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/astro/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined' is not assignable to type '"build" | "serve" | ((this: void, config: import("path/to/node_modules/vite/dist/node/index").UserConfig, env: import("path/to/node_modules/vite/dist/node/index").ConfigEnv) => boolean) | undefined'.

colus001 · 2025-01-25T09:15:36Z

colus001
Jan 25, 2025

Same for solid-start. It shows type error but works fine.

0 replies

gurpreet-fe · 2025-03-03T18:17:58Z

gurpreet-fe
Mar 3, 2025

Same for tailwindcss plugin. Is there a fix to this?

1 reply

anmpog Mar 4, 2025

I am also getting this error attempting to migrate from v3 to v4. My code editor shows a typescript error, but my site is building/running locally.

fedetibaldo · 2025-03-11T16:50:26Z

fedetibaldo
Mar 11, 2025

I ran into the same issue after turning my Vite + TailwindCSS website into an Astro project. In my case, even after removing Vite as a direct dependency, NPM kept two versions of Vite installed (6.x, used by astro, and 5.x used by @tailwindcss/vite). That's, I assume, what causes the type error.

> npm why vite

[email protected]
node_modules/astro/node_modules/vite
  vite@"^6.2.0" from [email protected]
  node_modules/astro
    astro@"^5.4.3" from [email protected]
    packages/website
      [email protected]
      node_modules/website
        workspace packages/website from the root project

[email protected] peer
node_modules/vite
  peer vite@"^5.2.0 || ^6" from @tailwindcss/[email protected]
  node_modules/@tailwindcss/vite
    dev @tailwindcss/vite@"^4.0.12" from [email protected]
    packages/website
      [email protected]
      node_modules/website
        workspace packages/website from the root project
  peerOptional vite@"^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" from [email protected]
  node_modules/vitefu
    vitefu@"^1.0.6" from [email protected]
    node_modules/astro
      astro@"^5.4.3" from [email protected]
      packages/website
        [email protected]
        node_modules/website
          workspace packages/website from the root project

To fix it, I removed all the top-level packages that resolved to vite@5 (in my case, both astro and @tailwindcss/vite) and reinstalled them starting from astro. After reinstalling @tailwindcss/vite, the problem went away, and now I have only one version of Vite installed.

> npm why vite

[email protected]
node_modules/vite
  peer vite@"^5.2.0 || ^6" from @tailwindcss/[email protected]
  node_modules/@tailwindcss/vite
    dev @tailwindcss/vite@"^4.0.12" from [email protected]
    packages/website
      [email protected]
      node_modules/website
        workspace packages/website from the root project
  vite@"^6.2.0" from [email protected]
  node_modules/astro
    astro@"^5.4.3" from [email protected]
    packages/website
      [email protected]
      node_modules/website
        workspace packages/website from the root project
  peerOptional vite@"^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" from [email protected]
  node_modules/vitefu
    vitefu@"^1.0.6" from [email protected]
    node_modules/astro
      astro@"^5.4.3" from [email protected]
      packages/website
        [email protected]
        node_modules/website
          workspace packages/website from the root project

I hope my troubleshooting will help you. Cheers.

2 replies

aczw Apr 9, 2025

This worked perfectly. For me I also had to remove and reinstall @astrojs/react and @astrojs/vercel. Thank you so much!

bennycode Apr 24, 2025

I ran into the same issue after turning my Vite + TailwindCSS website into an Astro project. In my case, even after removing Vite as a direct dependency, NPM kept two versions of Vite installed (6.x, used by astro, and 5.x used by @tailwindcss/vite). That's, I assume, what causes the type error.

Thanks for the hint! I checked with npm why vite which versions of Vite have been installed and noticed that I had Vite v4, v5 and v6 references in my package-lock.json file. This caused TypeScript type incompatibilities. I solved them by updating my packages using npm update --save which resolved the Type 'Plugin<any>[]' is not assignable to type 'PluginOption' error for me.

mciszczon · 2025-04-18T08:27:42Z

mciszczon
Apr 18, 2025

I also ran into this error. In my case the conflict was between @astrojs/solid-js and Vite version that comes with solid-devtools:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   vite@"^6.2.6" from @astrojs/[email protected]
npm ERR!   node_modules/@astrojs/solid-js
npm ERR!     @astrojs/solid-js@"^5.0.8" from the root project
npm ERR!   peer vite@"^5.2.0 || ^6" from @tailwindcss/[email protected]
npm ERR!   node_modules/@tailwindcss/vite
npm ERR!     dev @tailwindcss/vite@"^4.1.4" from the root project
npm ERR!   1 more (astro)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev solid-devtools@"^0.30.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vite
npm ERR!   peerOptional vite@"^2.2.3 || ^3.0.0 || ^4.0.0 || ^5.0.0" from [email protected]
npm ERR!   node_modules/solid-devtools
npm ERR!     dev solid-devtools@"^0.30.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

In my case I just decided to get rid of the dev tools, since I don't need them anyway (I've got a fairly simple and uncomplicated project).

Here are my deps for reference (with devtools already removed):

{
	"dependencies": {
	    "@astrojs/check": "^0.9.4",
	    "@astrojs/solid-js": "^5.0.8",
	    "@iconify-json/simple-icons": "^1.2.31",
	    "accessible-astro-components": "^4.1.0",
	    "astro": "^5.6.1",
	    "astro-icon": "^1.1.5",
	    "solid-js": "^1.9.5",
	    "tailwindcss": "^4.1.3",
	    "typescript": "^5.8.3"
	  },
	  "devDependencies": {
	    "@iconify-icon/solid": "^2.3.0",
	    "@iconify-json/solar": "^1.2.2",
	    "@rollup/plugin-yaml": "^4.1.2",
	    "@tailwindcss/forms": "^0.5.10",
	    "@tailwindcss/typography": "^0.5.16",
	    "@tailwindcss/vite": "^4.1.4",
	    "@typescript-eslint/parser": "^8.29.1",
	    "eslint": "^9.24.0",
	    "eslint-config-prettier": "^10.1.1",
	    "eslint-plugin-astro": "^1.3.1",
	    "eslint-plugin-jsx-a11y": "^6.10.2",
	    "husky": "^9.1.7",
	    "lint-staged": "^15.5.0",
	    "prettier": "3.5.3",
	    "prettier-plugin-astro": "0.14.1"
	  }
}

1 reply

rozsazoltan Apr 18, 2025

Problem

This is not the same error.

npm ERR! Could not resolve dependency:
npm ERR! dev solid-devtools@"^0.30.1" from the root project

This is a different one. Your solid-devtools extension supports up to Vite v5.

npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR! vite@"^6.2.6" from @astrojs/[email protected]

But you're requesting Vite v6 in your project via @astrojs/solid-js.

Solution

You want to install solid-devtools v0.30.1 in your project, but the package only supports Vite v6 starting from v0.31.0. So, make sure to request at least v0.31 for use in your project.

solid-devtools v0.31.0 changelog

What's interesting is that according to the error message, you're specifically requesting this from the package.json, but there's no such package listed in it. I'm not familiar with which package is requesting solid-devtools v0.30.1, but you can find out by using the following command:

npm ls solid-devtools

Once you identify which dependency is requesting solid-devtools v0.30.1, you'll need to update that dependency to a version that requires at least v0.31.

If I had to guess, you need to update your @astrojs/solid-js package.

You can override the peerDep in your project:

npm install -D solid-devtools@latest

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

astro #15768

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

astro #15768

Replies: 4 comments · 4 replies

Problem

Solution

Replies: 4 comments 4 replies