useIsBrowser causes Invalid hook call.

[nick-verida]

Hi,

I'm doing a fairly complex site involving the use of the the interactive code editor along with imports that aren't available for server side rendering.

I can get a working client side only site (usable via yarn start) fairly simply but getting a build to work has given me a lot of trouble because of the server side rendering.

I've attempted to use useIsBrowser for this roughly like this (inside the swizzled ReactLiveScope\index.js):

import useIsBrowser from '@docusaurus/useIsBrowser';
    
if (useIsBrowser()){
    account = require('@package-name/cannot-do-ssr')

   const ReactLiveScope = {
    React,
    ...React,
    useState,
    useEffect,
    account
  };

} else {

   const ReactLiveScope = {
    React,
    ...React,
    useState,
    useEffect,
    
  }; 
}

 export default ReactLiveScope;

This give the following error during yarn build

[ERROR] Docusaurus Node/SSR could not render static page with path /markdown-page because of following error:
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at S (main:157624:327)
    at exports.useContext (main:157628:269)
    at useIsBrowser (main:36012:84)
    at Object.19259 (main:39292:35)
    at __webpack_require__ (main:215715:42)
    at Module.93590 (main:39393:21)
    at __webpack_require__ (main:215715:42)
    at main:37146:702

In the browser, using yarn start I get:

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.

Two questions:

• Is there a way to disable SSR completely for the build phase?
• If not, how do fix this? I don't actually understand why it is happening at all since ReactLive isn't used on that page.

[Josh-Cena]

You don't need to detect browser env in this case. The live preview isn't even enabled during SSR phase, AFAICT. Has it caused errors? Is the lib not even import-able during SSR?

You should probably learn about hooks and their mental model? Alternatively, we also offer the ExecutionEnvironment namespace for non-rendering logic, and it seems well-suited for your use-case.

[nick-verida]

Is the lib not even import-able during SSR?

It seems not. If I import it in ReactScopeLive/index.js I start getting errors.

[nick-verida]

Is it possible to turn off SSR as part of yarn build?

[Josh-Cena]

yarn start doesn't SSR. Only build would SSR.

[nick-verida]

yeah, that was my understanding and led to my question about disabling SSR in yarn build. But if you say that's a bad idea happy to try other things.

[Josh-Cena]

Yeah, I've just set up your project. Inspecting now

[nick-verida]

Oh, I tried downgrading webpack along the way. Look out for that.

[nick-verida]

Do you have any suggestions for what I could try?

[slorber]

useIsBrowser() is a React hook, and you can only call it inside a React component. See https://reactjs.org/link/invalid-hook-call

A solution could be to convert your lib to a browser-only version: #5273 (comment)

But if it's not a React component, I don't know, we should probably figure out a better solution

[nick-verida]

Yeah, it's not a React component.

I'm creating the React components for it inside the Live Code blocks, but the error has occurred by then.

[slorber]

@nick-verida one option might be to convert the whole live code block to a browser-only component, and use a dynamic import + load the scope

The original live CodeBlock component looks like this:

import React from 'react';
import Playground from '@theme/Playground';
import ReactLiveScope from '@theme/ReactLiveScope';
import OriginalCodeBlock from '@theme-init/CodeBlock';

export default function WrappedComponent(props) {
  if (props.live) {
    return <Playground scope={ReactLiveScope} {...props} />;
  }

  return <OriginalCodeBlock {...props} />;
}

Maybe you can swizzle it and replace with something like this:

import React from 'react';
import Playground from '@theme/Playground';
import OriginalCodeBlock from '@theme-init/CodeBlock';

function LiveCodeBlock(props) {
  const [scope, setScope] = useState(null);
  
  useEffect(() => {
    import("@theme/ReactLiveScope").then(setScope)
  },[])
 
  if (scope === null) {
    return <div>Loading ...</div>
  }
  
  return <Playground scope={scope} {...props} />;
}

export default function WrappedComponent(props) {
  if (props.live) {
    return <LiveCodeBlock {...props} />;
  }

  return <OriginalCodeBlock {...props} />;
}

I didn't try, just an idea.

[nick-verida]

Interesting.. Hmm.

I don't really know React (I'm a pytorch person) and was hoping to avoid learning it - I just wanted to write some docs! But looks like I'm going to have to understand a lot more.

Thanks for the suggestion.