use useEffect hooks in <BrowserOnly/> issuse

🐛 Bug Report

Prerequisites

• [√] I’m using the latest version of Docusaurus.
• [√] I have tried the npm run clear or yarn clear command.
• [√] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.

Description

When I use useEffect in my development BrowserOnly, the console reports the following error

export default function BlogTagsPostPage(props) {
    return (
        <BrowserOnly fallback={null}>
            {() => {
                useEffect(() => {
                    console.log(11);
                }, []);
                return <span></span>;
            }}
        </BrowserOnly>
    );
}

[slorber]

Use this instead:

export default function BlogTagsPostPage(props) {
  return <BrowserOnly fallback={null}>{() => <Time />}</BrowserOnly>;
}

function Time() {
  return <span>{require("clientOnlyLib").getSomeClientValue()}</span>;
}

[Josh-Cena]

这是因为你的代码在require的时候就已经被解析了，所以你应该把整个引入 dependency 的代码放在useEffect里面。另外，useIsBrowser 这个钩子你也可能想了解一下