Can't parse document when auth is added in Root.js
If I add an auth in src/theme/Root.js, search-local can't parse meta data:
[ERROR] Error: The `docusaurus_tag` meta tag could not be found. Please make sure that your page is wrapped in the `<Layout>` component (from `@theme/Layout`). If it is, then this is a bug, please report it.
src/theme/Root.js:
export default function Root({children}) {
const [isConnected, setIsConnected] = useState(false); // Manage authentification
return <>{
isConnected ? (
<>{children}</>
) : (
<div className="login">
<div className="login__container">
<button className="login__btn" onClick={() => setIsConnected(true)}>
Login
</button>
</div>
</div>
)
}</>;
}
Could I first build the index in dev env without authentification and then build in prod and use the index generated previously? Thanks,
+1
+1 running into this as well (trying to swizzle Root) to add authentication layer.
I ran into this issue as well, what ended up working for me was swizzling the Layout component and putting my authentication logic within the <LayoutProvider>
I ended up going with a different Docusaurus plugin, which still had a similar issue (it wouldn't index anything but ran fine). So I essentially created a check within the Root component that looked for an environment variable to be set to disable auth that I utilized during build to index .. copied/pasted index files out .. rebuild with authentication and copy index files back in.
It's not great, but it worked :) in case anyone else was considering this approach. Be sure to consider the risks involved if you accidentally break authentication of your site during deploy. Sounds like the <Layout> option above is a better idea. I might migrate to it to avoid the workaround I built.
I ran into this issue as well, what ended up working for me was swizzling the Layout component and putting my authentication logic within the
<LayoutProvider>
Thanks for your answer Can you share your code?
any updates?