Unable to write a functional component using hooks (Error: Invalid hook call) #265

Activity

1. KittyGiraudel commented on Aug 11, 2021

   

   KittyGiraudel

   on Aug 11, 2021

   Contributor

   More actions

   Hey there! 👋

   @adiyathemighty and I have spent some time investigating this today and can say that this happens because of a React version mismatch (project running react@17 while react-live runs react@16.8), as hinted in the error. However, this only seems to happen when server-side rendering is involved (as the error happens on the server, and not on the client). Indeed, it cannot be reproduced on CodeSandbox (which uses CSR only).

   It can be reproduced with a barebone Next app though:

   npx create-next-app react-live-test
   npm install react-live

   In pages/index.js, set up the example shared in the README:

   import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
   
   export default function Home() {
     return (
       <LiveProvider code="<strong>Hello world</strong>">
         <LiveEditor />
         <LiveError />
         <LivePreview />
       </LiveProvider>
     );
   }

   Running npm run dev (the development server with server-side rendering) yields the invalid hook call error. This is because Next uses react@17 while react-live@2.3 uses react@16.8.0.

   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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
       at resolveDispatcher (/Users/kitty/Sites/react-live-test/node_modules/react-live/node_modules/react/cjs/react.development.js:1465:13)
       at Object.useState (/Users/kitty/Sites/react-live-test/node_modules/react-live/node_modules/react/cjs/react.development.js:1496:20)
       at LiveProvider (/Users/kitty/Sites/react-live-test/node_modules/react-live/dist/react-live.cjs.js:344:25)
   

   There doesn’t seem to be an easy workaround beyond downgrading react-live to 2.2.3, the latest version compatible with React 17 + SSR. Any further version will cause an error until react-live relies on React 17 as well instead of 16.8.0.

   👍React with 👍2Reacted by João Guilherme and Christian Kaindl
2. arifszn commented on Aug 20, 2021

   

   arifszn

   on Aug 20, 2021

   More actions

   Same issue for docusaurus with react 17.
3. jpdriver commented on Aug 20, 2021

   

   jpdriver

   on Aug 20, 2021

   Contributor

   More actions

   thank you so much for the investigation + writeup @KittyGiraudel

   we should definitely be able to fix this -- i'd like to get react@17 included in the next round of dependency upgrades

   for what it's worth, the demo site (also using Next) had a similar issue. I had to add these lines to the webpack config to solve it..

   it might be worth seeing if that works as a temporary workaround so you can stay on react-live@latest in the meantime?

   👍React with 👍1Reacted by Rahman Hidayat
4. adithemighty commented on Aug 23, 2021

   

   adithemighty

   on Aug 23, 2021

   More actions

   Hello @jpdriver,
   thanks for coming back to us with a workaround! I can confirm that it works :)
5. konsumer commented on Sep 19, 2021

   

   konsumer

   on Sep 19, 2021

   Last edited by konsumer

   More actions

   I am using react-live@latest and get the same error with these versions (with fresh node_modules):

   "next": "^11.1.2",
   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "react-live": "^2.3.0"
   

   testing with this react:

   const LiveDemo = ({ children,  scope}) => (
     <LiveProvider code={children} scope={scope}>
       <LiveEditor />
       <LiveError />
       <LivePreview />
     </LiveProvider>
   )

   putting this in my next.config.js also didn't fix it:

   module.exports = {
     webpack (config) {
       config.resolve.alias.react = path.resolve('./node_modules/react')
       config.resolve.alias['react-dom'] = path.resolve('./node_modules/react-dom')
       return config
     }
   }

   If I downgade:

   npm i -D react-live@2.2.3
   

   that got it running.
6. equinusocio commented on Dec 17, 2021

   

   equinusocio

   on Dec 17, 2021

   Last edited by equinusocio

   More actions

   Same, we had to downgrade to react-live@2.2.3 on Nextjs 12.0.7
7. scottianstewart commented on Feb 20, 2023

   

   scottianstewart

   on Feb 20, 2023

   Contributor

   More actions

   This appears to be fixed with the latest version of react-live 3.1.1
8. scottianstewart

   closed this as completedon Feb 20, 2023
9. tujoworker commented on Aug 5, 2026

   

   tujoworker

   on Aug 5, 2026

   More actions

   Here is a new PR that adds SSR support.