Update plugin to the new version of Vite 5.x

[rkhaslarov]

Description

Please update plugin to the new version of Vite 5.x

Suggested solution

Update to the new API and peer dep

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ArnaudBarre]

This was done in 4.2: https://github.com/vitejs/vite-plugin-react/releases/tag/v4.2.0

What's not working for you?

[g3r4n]

@ArnaudBarre here the output on my end:

Trace: The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
    at warnCjsUsage (XXX/node_modules/vite/index.cjs:32:3)
    at Object.<anonymous> (XXX/node_modules/vite/index.cjs:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at _require.extensions.<computed> [as .js] (file:///XXX/node_modules/vite/dist/node/chunks/dep-T98iZFpD.js:66295:17)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/XXX/node_modules/@vitejs/plugin-react/dist/index.cjs:3:14)

[ArnaudBarre]

@g3r4n you're probably running vite in cjs mode, see the migration guide: https://vitejs.dev/guide/migration.html#deprecate-cjs-node-api

[emanuel-lundman]

Since the issue is lacking v5 support.
I’m getting this error when type checking ts with vite 5 and vite-plugin-react 4.2 after upgrading

│   Types of property 'api' are incompatible.
│     Type '{ reactBabel?: ReactBabelHook | undefined; } | undefined' is not assignable to type 'A | undefined'.
│       Type '{ reactBabel?: ReactBabelHook | undefined; }' is not assignable to type 'A'.
│         'A' could be instantiated with an arbitrary type which could be unrelated to '{ reactBabel?: ReactBabelHook | undefined; }'.
│ 2855 interface Plugin<A = any> extends rollup.Plugin<A> {

In a previously closed vite issue (vitejs/vite#14665) this is said to be because vite-plugin-react 4.1 was used and it was not yet compatible with v5. I’m running vite 5 and vite-plugin-react 4.2 and I’m having the same problem as described after upgrading. 🤔

[sergeushenecz]

@ArnaudBarre If i changed in packages.json "type": "module", then i see next error.

[plugin:vite:react-babel] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs'

[schickling]

Probably not a big issue but I'm seeing the following after pnpm install:

[ArnaudBarre]

@emanuel-lundman This is an issue with a change of types in rollup I didn't catch prior to release, I'm looking into it. You're seeing the error because you didn't enable skipLibCheck in tsconfig. As a end user it's often better to disable it, otherwise you are accountable for all the mismatch of types of all libs you use and you can't really do a lot except report it and wait for it to be fixed (it will but takes you time for not a lot of benefits)

@sergeushenecz You also need to convert some of your code to ESM and you export instead of module.exports

@schickling You should bump the plugin to 4.2

[sxzz]

I don't think it's a good idea to override the global api type by adding reactBabel. It will affect all plugin types in userland.
So maybe we can remove declare module 'vite' and use type assertion.

const hooks = config.plugins
	.map((plugin) => plugin.api?.reactBabel as ReactBabelHook | undefined)
    .filter(defined)

[ArnaudBarre]

I think the initial idea was to provide additional typing information for consumers, not for internal uses. But if this not something supported by rollup typing I will remove this and export the type so that consumer can import it

[stevensacks]

Here's what I'm seeing in my remix + storybook project:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @vitejs/plugin-react@3.1.0
npm WARN Found: vite@5.0.3
npm WARN node_modules/vite
npm WARN   dev vite@"5.0.3" from the root project
npm WARN   8 more (@joshwooding/vite-plugin-react-docgen-typescript, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer vite@"^4.1.0-beta.0" from @vitejs/plugin-react@3.1.0
npm WARN node_modules/@storybook/react-vite/node_modules/@vitejs/plugin-react
npm WARN   @vitejs/plugin-react@"^3.0.1" from @storybook/react-vite@7.6.0-beta.2
npm WARN   node_modules/@storybook/react-vite
npm WARN
npm WARN Conflicting peer dependency: vite@4.5.0
npm WARN node_modules/vite
npm WARN   peer vite@"^4.1.0-beta.0" from @vitejs/plugin-react@3.1.0
npm WARN   node_modules/@storybook/react-vite/node_modules/@vitejs/plugin-react
npm WARN     @vitejs/plugin-react@"^3.0.1" from @storybook/react-vite@7.6.0-beta.2
npm WARN     node_modules/@storybook/react-vite

[ArnaudBarre]

@stevensacks your error come from a bad state in your package lock. I don't know the equivalent but with yarn I used https://www.npmjs.com/package/yarn-deduplicate
Probably dropping the lock and node_modules and re-installing should solve that, but this will bump everything which can lead to issue for application deps