Root.js doesn't get wrapped around the docusaurus component tree.

[bennobuilder]

🐛 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.
• I have tried creating a repro with https://new.docusaurus.io
• I have read the console error message carefully (if applicable)

Description

Root.js doesn't get wrapped around the docusaurus component tree.

Have you read the Contributing Guidelines on issues?

Yes

Steps to reproduce

https://codesandbox.io/s/docusaurus-root-theme-c8prr?file=/src/theme/Root.js

Open the provided codesandbox and checkout the Root.js file in src/theme/.
Then you should see something like that:

import React, { useLayoutEffect } from 'react';
import WebFont from 'webfontloader';
import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';

// https://docusaurus.io/docs/using-themes#wrapper-your-site-with-root
const Root: React.FC = (props) => {
  // Allow navigating with the Keyboard
  useKeyboardNavigation();

  useLayoutEffect(() => {
    // Load Font
    WebFont.load({
      google: {
        families: ['Roboto'],
      },
    });
  }, []);

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

export default Root;

If you now start the docusaurus page you will notice that it won't call the Root.js wrapper,
since the console.log("Called Root") hasn't been executed and the Roboto font hasn't been loaded.

Expected behavior

The Root.js file should be wrapped around the docusaurus component tree,
as described in the documentation:
https://docusaurus.io/docs/using-themes#wrapper-your-site-with-root

Actual behavior

The Root.js file hasn't been wrapped around the docusaurus component tree.

Your environment

Doesn't matter

Reproducible demo

https://codesandbox.io/s/docusaurus-root-theme-c8prr?file=/src/theme/Root.js

[bennobuilder]

In the docusaurus code a Root tag is definitely wrapped around the whole app..
However, it doesn't seem to get loaded correctly from @theme/Root

[slorber]

Yes it works: https://codesandbox.io/s/docusaurus-root-theme-forked-s7moo

It's just because adding a new swizzled component requires restarting your docusaurs server, so that we can update webpack aliases

Also codeSandbox use a remote docker container so when you reload your browser, it does not necessarily restart Docusaurus behind the scene

[slorber]

[bennobuilder]

Thanks for the super quick answer ^^

Does yarn run start restart the docusaurus server then?
Because if so, I've tried that multiple times locally, and it didn't change anything...

and how did you restart the server in the code sandbox.. because I also doesn't seem to get it work there :/

[slorber]

Are you on latest version? We had a problem on first betas Le mer. 30 juin 2021 à 20:14, BennoDev ***@***.***> a écrit :

…

Does yarn run start restart the docusaurus server then? Because if so, I've tried that multiple times, and it didn't change anything... — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#5105 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PSR63FTPRJM4ZRXIMDTVNNIPANCNFSM47S2XW2A> .

[bennobuilder]

Ohh.. right I didn't notice that since in the past there did appear a warning when I wasn't on the latest version..
Thanks now it works ;D

[slorber]

np

Did a check about the update notification, and it still work but it only displayed the update message at most once per day.

Making it stick on each run with #5110