SearchBar is not seen as a function component

jbltx commented 1 year ago

Please describe the bug you are seeing

After adding the plugin in the docusaurus config file, the website has crashed.

Here are the errors in the right order

- Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. 
- Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. 
- react.development.js?f01a:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (react.development.js?f01a:1622:1)
    at SearchBar (index.js?6736:59:1)
    at renderWithHooks (react-dom.development.js?ac89:14985:1)
    at mountIndeterminateComponent (react-dom.development.js?ac89:17811:1)
    at beginWork (react-dom.development.js?ac89:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4056:1)
    at beginWork$1 (react-dom.development.js?ac89:23964:1)
    at performUnitOfWork (react-dom.development.js?ac89:22776:1)

Basically it think SearchBar is not a function component, the warning comes from the first useIsBrowser() inside

const SearchBar = () => {
    // A bit of a hack that makes sure data-theme is not only set on <html>, but also on <body>.
    // We would like to useThemeContext, but that is specific to docusaurus-theme-classic.
    const isBrowser = useIsBrowser();    <-------------------------------
    const [isDarkTheme, setIsDarkTheme] = useState(() => isBrowser
        ? document.documentElement.getAttribute("data-theme") === "dark"
        : false);

        [...]
 }

Then useIsBrowser tries to call useState() from React but dispatch is null at this moment. So the whole page crashes.

How can we best reproduce the bug?

Not sure, I just installed the package and added the required line in the plugins section

Which version of Docusaurus and @cmfcmf/docusaurus-search-local are you using?

yarn list v1.22.19
├─ @cmfcmf/docusaurus-search-local@0.11.0
├─ @docusaurus/core@2.3.1
├─ @docusaurus/cssnano-preset@2.3.1
├─ @docusaurus/logger@2.3.1
├─ @docusaurus/mdx-loader@2.3.1
├─ @docusaurus/module-type-aliases@2.3.1
├─ @docusaurus/plugin-content-blog@2.3.1
├─ @docusaurus/plugin-content-docs@2.3.1
├─ @docusaurus/plugin-content-pages@2.3.1
├─ @docusaurus/plugin-debug@2.3.1
├─ @docusaurus/plugin-google-analytics@2.3.1
├─ @docusaurus/plugin-google-gtag@2.3.1
├─ @docusaurus/plugin-google-tag-manager@2.3.1
├─ @docusaurus/plugin-sitemap@2.3.1
├─ @docusaurus/preset-classic@2.3.1
├─ @docusaurus/react-loadable@5.5.2
├─ @docusaurus/theme-classic@2.3.1
├─ @docusaurus/theme-common@2.3.1
├─ @docusaurus/theme-search-algolia@2.3.1
├─ @docusaurus/theme-translations@2.3.1
├─ @docusaurus/types@2.3.1
├─ @docusaurus/utils-common@2.3.1
├─ @docusaurus/utils-validation@2.3.1
└─ @docusaurus/utils@2.3.1

Which Node.js version are you using?

18.13

Which theme are you using?

Yes, I am using @docusaurus/theme-classic

How does your plugin config look like?

{
  plugins: [
    require.resolve("@cmfcmf/docusaurus-search-local"),
  ]
}

Additional context

My Docusaurus project is part of a monorepo, managed by Lerna. I don't know if it can cause any problem.

jbltx commented 1 year ago

Seems to be related to a conflict between different React versions in the mono repo. I adjusted my dependencies to use the same React version in every package and now it works. It is not ideal but at least it's a workaround.

cmfcmf commented 1 year ago

Glad to hear it is now working. I'll close this issue then.

cmfcmf / docusaurus-search-local