React invalid hook call in library mode

[mlshv]

Describe the bug

I have a React component that is built using vite library mode. But when i import this component in app created by create-react-app i get the following error:

react.development.js:209 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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
react.development.js:1630

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1630:1)
    at YN (Swipeout.tsx:59:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)

Though it works fine in an app created by Vite

Reproduction

https://github.com/letoxyz/swipeout

Steps to reproduce

git clone https://github.com/letoxyz/swipeout
cd swipeout
npm install
npm run build
cd ..
npx create-react-app swipeout-test
cd swipeout-test
npm install
npm install ../swipeout
npm start

Insert the following code to swipeout-test/src/App.tsx:

import { Swipeout } from "@letoxyz/swipeout";
import "@letoxyz/swipeout/style.css";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Swipeout
        {...{
          children: <div>Test</div>,
          actions: {
            left: [
              {
                renderContent: () => (
                  <div>
                    Red <br /> action
                  </div>
                ),
                width: 86,
                background: "#ff3737",
                onTrigger: () => console.log("red triggered"),
              },
            ],
            right: [
              {
                renderContent: () => (
                  <div>
                    Yellow <br /> action
                  </div>
                ),
                background: "#ffe437",
                width: 86,
                onTrigger: () => console.log("yellow triggered"),
              },
            ],
          },
        }}
      />
    </div>
  );
}

export default App;

System Info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 127.38 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 16.15.0 - ~/Library/Caches/fnm_multishells/61188_1669370394724/bin/node
    npm: 8.5.5 - ~/Library/Caches/fnm_multishells/61188_1669370394724/bin/npm
Browsers:
    Firefox Developer Edition: 108.0
    Safari: 15.6.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[nrjshka]

Same problem

[luo3house]

Maybe not the issue of Vite...

Package @react-spring/web which the repro relays on not only imports react but also react-dom.

import { ... } from '@react-spring/web'
// It imports { unstable_batchedUpdates } from 'react-dom'

I saw Vite bundled a large copy for react-dom into dist build. Therefore, it should be configured as an external with react together.

And also, TSX, JSX are also supported out of the box(JSX Features). So if the repo is library only, the plugin @vitejs/plugin-react is not necessary.

// vite.config.ts
export default defineConfig({
  plugins: [
-   react(),
  ],
  build: {
    rollupOptions: {
+     external: ['react', 'react-dom'],
      output: {
          globals: {
              react: 'React',
+             'react-dom': 'reactdom'
          },
      },
    },
  }
})

[mlshv]

@luo3house thank for your guess, but it doesn't help. I've updated the repo with your suggestions but the exact same problem still remains

[mlshv]

The only workaround i've found by far is switching to plain rollup (letoxyz/swipeout#1)

[luo3house]

I am sorry I ignored an important operation.

And I don't think it is the issue of Vite.

The repo uses Rollup instead also causes the problem "Invalid hook call" if I follow steps of reproduction wrote above.

Please visit my repo related this issue if you are still in this problem, and try following README.md

[mlshv]

Looks like the issue happens because of linking the local version of a library in playground project to speed up the development. It leads to "duplicate version of React" because of a symlink to a library directory which has node_modules inside. This is where another copy of React sits

Thank you for your time, there is really no problem here