Docusaurus: is it possible to use components from NPM packages?

Question

I'm currently getting started with Docusaurus. I know that I can write custom components using mdx files (https://docusaurus.io/docs/markdown-features/react), but is it possible to install a React NPM package and use its components?

I tried this with ChakraUI:

import { Switch } from "@chakra-ui/react";

<Switch>{"test"}</Switch>

But just the word "test" is rendered. Thanks for the help!

I have few experience with react... But I managed to add the `react-player`, see if this shine some light for you: https://stackoverflow.com/a/69193176/5734097 — D.Kastier, Oct 20 '21 at 17:30

score 1 · Accepted Answer · answered Oct 21 '21 at 09:19

1

Fixed, I just had to create a Root component (https://docusaurus.io/docs/using-themes#wrapper-your-site-with-root) and wrap it with ChakraProvider

answered Oct 21 '21 at 09:19

Felpato

21
4

score 0 · Answer 2 · answered Jul 28 '22 at 22:36

Follow the steps below to get e.g. Chakra UI working with Docusaurus:

Create a custom root, i.e. a file at /src/theme/Root.js
Copy and Paste the following code snippet:

import React from "react";
import { ChakraProvider } from "@chakra-ui/react";

// Default implementation, that you can customize
export default function Root({children}) {
  return (
    <ChakraProvider>
      {children}
    </ChakraProvider>
  );
}

Troubleshooting:

error - TypeError: React__namespace.useSyncExternalStore is not a function -> npm add react-dom@latest react@latest
Could not resolve dependency error peer react@... -> npm config set legacy-peer-deps true
If still not working try deleting .docusaurus folder and reinstalling the contents of node_modules

Docusaurus: is it possible to use components from NPM packages?

2 Answers2