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

[wilson-vw]

When copying the first snippet from the usage section and replace the provided code by the one in the gif from the top of the README, I get an "Error: Invalid hook call".

Any suggestion.

Thank you in advance.

[KittyGiraudel]

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 [email protected]), 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 [email protected] uses [email protected].

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.

[arifszn]

Same issue for docusaurus with react 17.

[jpdriver]

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?

[adithemighty]

Hello @jpdriver,
thanks for coming back to us with a workaround! I can confirm that it works :)

[konsumer]

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 [email protected]

that got it running.

[equinusocio]

Same, we had to downgrade to [email protected] on Nextjs 12.0.7

[scottianstewart]

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