Invalid hook call when using react-colorful package

[LacombeJ]

I am seeing an Uncaught TypeError and getting Invalid hook call warnings when using plugin-react-swc and react-colorful package.

This happens when rendering <HexColorPicker></HexColorPicker>

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1630:21)
    at U (ColorPicker.tsx:22:19)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

"react": "^18.2.0",
"react-dom": "^18.2.0"
"@vitejs/plugin-react-swc": "^3.5.0"

No issue after replacing with plugin-react.

"@vitejs/plugin-react": "^4.2.1",

[ArnaudBarre]

I did bun create vite, select react + TS + SWC && bun add react-colorful && inserted <HexColorPicker /> into App.tsx and everything rendred as expected without errors

[LacombeJ]

I did bun create vite, select react + TS + SWC && bun add react-colorful && inserted <HexColorPicker /> into App.tsx and everything rendred as expected without errors

@ArnaudBarre So I'm on Windows and I did npm create vite@latest with the same steps as you did above (but using yarn) and it did render without any errors.

In my original post, I was using HexColorPicker from a separate local package, so I'm not sure if this is the issue. but I tried to reproduce with the following, and I began to see errors. (using yarn btw)

Local Package:

{
  "name": "test-color",
  "private": true,
  "version": "0.0.0",
  "main": "index.ts",
  "dependencies": {
    "react-colorful": "^5.6.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

import * as React from 'react';
import { HexColorPicker } from "react-colorful";

export const Color = () => {
  return <HexColorPicker></HexColorPicker>;
};

export * from './Color';

Test Project:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "test-color": "../test-color"
},

import { Color } from "test-color";

Strangely the error did disappear after removing the local package, adding react-colorful directly, then adding back the local package and removing react-colorful. Not sure if something is being cached but that's what I noticed. However, after removing node_modules and lock file, error reappeared again.

[ArnaudBarre]

So yeah probably you're hitting the reason number 3.: 3. You might have more than one copy of React in the same app
You should use a workspace manager to avoid that

[infomiho]

We faced a similar issue with nested packages, the two things that helped:

• using this plugin + putting react in the dedupe option
• switch to @vitejs/plugin-react

It's weird that this error shows up for one plugin, but not the other. I can provide a minimal repro if that will be helpful.

[ArnaudBarre]

Yeah this is because this plugin doesn't dedupe. I think this is better this way but I don't want to break people that really on this. You should use a workspace package manager to ensure you have only one version of React used across your packages that are used together. Not every tool will to the dedupe so it's better to avoid depending on Vite to do this (and worse not being sure which version you're running)

[ArnaudBarre]

I'm closing the issue for now.
Although I agree that the discrepancy between the two plugins is not great, I think that when it appears it reveals fragile setup that as worth fixing and not hiding via a Vite specific feature.
I will instead remove the dedupe option in the next major of the Babel plugin