Invalid hook call - Githubissues

libovness commented 2 years ago

This lib is just what I'm looking for but I'm running into this issue:

Error: 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.

at resolveDispatcher (/Users/jonathanlibov/node_modules/react/cjs/react.development.js:1476:13)
    at Object.useState (/Users/jonathanlibov/node_modules/react/cjs/react.development.js:1507:20)
    at InstagramEmbed (/Users/jonathanlibov/node_modules/react-social-media-embed/dist/components/embeds/InstagramEmbed.js:57:37)
    at renderWithHooks (/Users/jonathanlibov/apps/bathonea/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5471:16)
    at renderIndeterminateComponent (/Users/jonathanlibov/apps/bathonea/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5544:15)
    at renderElement (/Users/jonathanlibov/apps/bathonea/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5759:7)
    at renderNodeDestructive (/Users/jonathanlibov/apps/bathonea/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5898:11)
    at renderNode (/Users/jonathanlibov/apps/bathonea/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6030:12)
    at renderHostElement (/Users/jonathanlibov/apps/bathonea/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5456:3)
    at renderElement (/Users/jonathanlibov/apps/bathonea/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5765:5)

This is a Next app running React 18 on Node v16.14.2

justinmahar commented 2 years ago

Did you figure this out? Are you calling the hook from inside a function component?

Let me rephrase - Are you using this component inside a function component or in a class component? I built this using React hooks and function components so not sure how well it performs using the alternative.

justinmahar commented 2 years ago

Please reopen if the issue persists.

libovness commented 2 years ago

Sorry for not following up and yes I did fix though now I can't remember how. Here's what we built with it: https://www.explainitlike.com/

As an aside one thing that would be helpful is an event for when something doesn't load. In our case we have teachers using it and TikTok will often be blocked so we'd love to have a placeholder whenever something doesn't load.

justinmahar commented 2 years ago

@libovness Glad you got it working. I opened a feature request issue for that, great suggestion. I'll take a look into that next time I do maintenance on the project

justinmahar / react-social-media-embed

Invalid hook call #8