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 #834

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

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

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.
How can I resolve this issue?

CodeSandbox
@prenx4x
Copy link
Author

prenx4x commented May 20, 2024

This may not be esm issue, but react-three-fiber issue as Downgrading to v8.15.19 works without issues.

@prenx4x prenx4x closed this as completed May 20, 2024
@ije
Copy link
Member

ije commented May 21, 2024 •
edited
Loading

specifying the react version can fix it: "https://esm.sh/@react-three/fiber?deps=react@18.2.0", the will be improved by respecting caret semver range like react@^18.2.0 in next version

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
@ije @prenx4x