@tailwindcss/vite and @vitejs/plugin-vue have error in phpstorm

The packages are underline in red and give an error:

Vue: Cannot find module  @tailwindcss/vite  or its corresponding type declarations.
There are types at 'c:/local_devel/Code/_play/rcvue.lan/node_modules/@tailwindcss/vite/dist/index.d.mts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

Vue: Cannot find module  @vitejs/plugin-vue  or its corresponding type declarations.
There are types at 'c:/local_devel/Code/_play/rcvue.lan/node_modules/@vitejs/plugin-vue/dist/index.d.mts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

The moduleResolution is already bundler.

This doesnt seem to be breaking the page load so I'm not sure if it is just something with PhpStorm.

My vite config file below

Thanks

import { wayfinder } from '@laravel/vite-plugin-wayfinder';
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.ts'],
            ssr: 'resources/js/ssr.ts',
            refresh: true,
        }),
        tailwindcss(),
        wayfinder({
            formVariants: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server : {
               cors: true,
               host: "192.168.10.10",
               watch: {
                   usePolling: true,
               },
           }
});

LaryAI

4 months ago

Level 58

Your issue is related to how PhpStorm (and underlying TypeScript services) resolve module types for ESM packages, especially with "moduleResolution": "bundler". While this setup works fine for Vite and bundlers, IDEs sometimes struggle with newer resolution strategies or uncommon plugin type definitions.

Here’s how to resolve those red underlines and type errors:

1. Install TypeScript and Volar (if using Vue 3)

Make sure you have TypeScript and (for Vue 3) @vue/language-plugin-volar or the Volar extension installed, as this gives better type inference in Vue projects:

npm install --save-dev typescript

For Volar, check your IDE plugins or extensions in VSCode.

2. Check Your `tsconfig.json`

Open your tsconfig.json and look for "moduleResolution": "bundler". Not all editors understand this yet; try switching to "nodenext" (or "node16"):

{
  "compilerOptions": {
    "moduleResolution": "nodenext",   // <-- try this
    "module": "esnext",   // or "node16"
    // other options ...
  }
}

Restart PhpStorm after making this change.

3. Add Package Type Declarations (If Needed)

If you still get red underlines, it could be because the packages lack exported types, or your tooling can't find them. You can try explicitly installing types, but for Vite plugins, this usually isn’t needed.

Check if the paths exist:

node_modules/@tailwindcss/vite/dist/index.d.mts
node_modules/@vitejs/plugin-vue/dist/index.d.mts

If they exist, PhpStorm should find them with the proper resolution settings.

4. IDE Caching Issue

Sometimes, PhpStorm caches can cause this. Try:

File > Invalidate Caches / Restart
Then restart PhpStorm

5. Accept it as an IDE Glitch

If the code compiles and runs, and only the IDE shows errors, it might just be a limitation of current JetBrains web tooling parsing non-standard ESM plugins. If so, you can safely ignore these, or suppress warnings with [// @ts-ignore] in rare cases (not needed here).

6. Example `tsconfig.json`

Here's a typical working one for a Vite+Vue+Tailwind setup:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "nodenext",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "resources/js/**/*.ts",
    "resources/js/**/*.d.ts"
  ]
}

Summary

Change "moduleResolution" to "nodenext" in tsconfig.json
Restart PhpStorm
Ensure you’re using the latest PhpStorm and plugins
If you're not using TypeScript, no action needed; it's just an IDE annoyance

If you still see the errors, it’s safe to ignore them as your build is not affected. Keep your tooling up to date as IDE support for ESM and bundler-style resolutions is still improving.

Let me know if you need further help or have follow-up questions!