docusaurus: Page crashes when trying to use live code block

Have you read the Contributing Guidelines on issues?

I have read the Contributing Guidelines on issues.

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

When trying to use live code blocks, I get this error (rendered on the client, not in terminal):

This page crashed. “useColorMode()” is used outside of “Layout” component. Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.

Note that I get no such error when just using code blocks. The error appears when I add live after the language meta tag.

I’m using version 2.0.0-beta.15.

Steps to reproduce

To any Markdown docs page, add a live code block, like this example from the documentation:

```jsx live
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
```

This should produce the error described above. Now, remove live after the language meta tag. This should result in no error.

Expected behavior

The live code block should work without error.

Actual behavior

I get the error described above.

Your environment

Public source code:
Public site URL:
Docusaurus version used: 2.0.0-beta.15
Environment name and version (e.g. Chrome 89, Node.js 16.4):
Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Reproducible demo

No response

Self-service

I’d be willing to fix this bug myself.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 16

Commits related to this issue

Add @docusaurus/theme-common peer dependency for package.json configuration. See: https://github.com/facebook/docusaurus/issues/6724. — committed to dnguyen0304/docusaurus-theme-environment-variables by dnguyen0304 a year ago

Most upvoted comments

Found a solution for those that are running into this bug with pnpm. Essentially issue is pnpm installs 2 instances (but same version and sha256 hash!) of @docusaurus/theme-common this causes a mismatch in the ColorProvider context and useColorProvider invoked by livecode Playground.

Current albeit a bit hack solution I found was to just ignore all dependencies on @docusaurus/* packages that are already explicitly included in my project’s dependencies (and are therefore listed in the package.json).

//.pnpmfile.cjs
module.exports = {
    hooks: {
        readPackage(pkg) {
            if (pkg.name != 'my-website') {
                const deps = ["@algolia/client-search", "@docusaurus/core", "@docusaurus/preset-classic", "@docusaurus/theme-common", "@docusaurus/theme-live-codeblock"]
                deps.forEach((p) => delete pkg.dependencies[p])
            }
            return pkg
        }
    }
}

Also useful is hoisting the relevant libraries:

//.npmrc
public-hoist-pattern[]='@docusaurus/*'
public-hoist-pattern[]=@mdx-js/react
hoist=false

EDIT: As mentioned from below answers, I forgot to mention you have to also add @docusaurus/theme-common to your package.json and also delete any pnpm-lock.yaml file (pnpmfile.cjs is only used when resolving depedencies, therefore it get’s bypassed if you have a lockfile).

leovigna on Dec 8, 2022

Was running into the same issue. I tested with the official docusaurus starter.

Installed with npm and it worked.
Deleted node_modules, installed with pnpm broken Hook useColorMode is called outside the <ColorModeProvider> error

This leads me to believe it is an issue with webpack5 & pnpm.

leovigna on Jul 19, 2022

I’m also using pnpm and the above solution didn’t work. I fixed it by adding @docusaurus/theme-common in the package.json of my doc package in my monorepo

norman-ags on Aug 25, 2022

@certainlyNotHeisenberg Since it succeeds in the Docusaurus site, I can guarantee that it is not a Docusaurus bug. Do you have a repro? Have you swizzled any component? Please don’t use the GitHub issue tracker as a support forum—unless you can clearly outline how it’s a Docusaurus defect, we will treat it as a question.

Josh-Cena on Feb 20, 2022

In my case, I actually had to add @docusaurus/types to the dependencies of my doc project - @docusaurus/theme-common was being duplicated by PNPM because @docusaurus/utils sometimes had the @docusaurus/types optional dependency provided and sometimes not. By providing it explicitly in my dependencies, it eliminated the duplicates and fixed my problem.

strmer15 on Dec 30, 2022

Many thanks. I tried below steps and it works as magic. Also thanks to https://github.com/facebook/docusaurus/issues/7880.

Solution 1:

Hoist doc’s @docusaurus/theme-common into root node_modules:

Root’s .npmrc:

 public-hoist-pattern[]=@docusaurus/theme-common*
 public-hoist-pattern[]=@mdx-js/react

Then delete root’s & doc’s node_modules folders and reinstall.

Solution 2:

Move @docusaurus/theme-common into peerDependencies:

Doc’s package.json:

{
  "peerDependencies": {
    "@docusaurus/theme-common": "^2.1.0"
  },
}

NiuZhuang on Dec 14, 2022

The only case that I can think of to make it fail in code sandbox without non-trivial effort is exporting a page from src/pages without wrapping it in Layout. Because any Markdown page should always be wrapped with Layout

Josh-Cena on Feb 23, 2022