Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
prenx4x opened this issue May 20, 2024 · 2 comments
Closed

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

prenx4x opened this issue May 20, 2024 · 2 comments

Comments

@prenx4x
Copy link

prenx4x commented May 20, 2024

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
Copy link
Author

prenx4x commented May 20, 2024 •
edited
Loading

Downgrading to v8.15.19 works without issues - #3267

@CodyJasonBennett
Copy link
Member

CodyJasonBennett commented May 21, 2024 •
edited
Loading

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

@FredrikNoren FredrikNoren mentioned this issue Sep 11, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@prenx4x @CodyJasonBennett