Invalid hook call with @react-three/fiber

prenx4x commented 6 months ago

I have this simple code in html to run a react-three-fiber canvas -

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <script type="importmap">
            {
              "imports": {
                "@jsxImportSource": "https://esm.sh/react@18.2.0?dev",
                "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev",
                "@react-three/fiber": "https://esm.sh/@react-three/fiber?dev"
              }
            }
        </script>
        <script type="module" src="https://esm.sh/run"></script>
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>

    <script type="text/babel" >
        import {createRoot} from 'react-dom/client';
        import {Canvas} from '@react-three/fiber';

        function App() {
            return (
                <div>
                    <Canvas >
                    </Canvas>
                </div>
            );
        }

        createRoot(window.root).render(<App />);
    </script>
    </body>
    </html>

But I get the error -

its-fine.development.mjs:68 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.

react.development.js:1650 Uncaught TypeError: Cannot read properties of null (reading 'useMemo')
    at Module.useMemo2 (react.development.js:1650:21)
    at Canvas (react-three-fiber.esm.js:125:9)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19226:20)
    at beginWork (react-dom.development.js:21636:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26560:12)

its-fine.development.mjs:68 The above error occurred in the <ForwardRef(Canvas)> component:

    at Canvas (https://esm.sh/v135/@react-three/fiber@8.16.6/es2022/fiber.development.mjs:2015:3)
    at FiberProvider (https://esm.sh/v135/its-fine@1.2.5/es2022/its-fine.development.mjs:71:21)
    at CanvasWrapper
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

In the sources tab, I do see react v18.2.0 and v18.3.1, I am not sure why there are 2 versions of react there but maybe that is reason for the invalid hooks error. If I remove react-three dependency, then it works fine with one version of react.

How can I resolve this issue?

CodeSandbox

prenx4x commented 6 months ago

Downgrading to v8.15.19 works without issues - https://github.com/pmndrs/react-three-fiber/issues/3267

CodyJasonBennett commented 6 months ago

You have multiple versions of React, as explained by the error. ESM.sh must be loading the latest version of React when resolving peer dependencies. Specify react 18.3.1 and react-dom 18.3.1.

https://codesandbox.io/p/sandbox/esmsh-forked-cyn8z9

pmndrs / react-three-fiber

Invalid hook call with @react-three/fiber #3268