How to tweak Docusaurus webpack config for some react component?

Question

It seems that one of my component ( https://www.npmjs.com/package/@stoplight/json-schema-viewer ) needs some tweaks in webpack with Docusaurus

Any ideas ? I tried to follow https://gist.github.com/sibelius/24f63eef7f43b15dc73c4a0be11bbef8 but it didn't work ...

Step to reproduce :

npx create-docusaurus@latest my-website classic --typescript
cd my-website
npm install @stoplight/json-schema-viewer

Create a schema.json into static folder such as :

{
  "$id": "https://example.com/person.schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "Person",
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string",
      "description": "The person's first name."
    },
    "lastName": {
      "type": "string",
      "description": "The person's last name."
    },
    "age": {
      "description": "Age in years which must be equal to or greater than zero.",
      "type": "integer",
      "minimum": 0
    }
  }
}

Create inside src/pages the file json_schema.tsx with :

import React, { useState, useEffect } from 'react';
import Layout from '@theme/Layout';
import useBaseUrl from '@docusaurus/useBaseUrl';
import {useColorMode} from '@docusaurus/theme-common';
import { JsonSchemaViewer } from "@stoplight/json-schema-viewer";

// docusaurus.config.js
// https://gist.github.com/sibelius/24f63eef7f43b15dc73c4a0be11bbef8

function fetchSchema(URL : string, callback : (any) => void) {
    fetch(URL, {
        method: "GET",
        headers: {
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(json => callback(json))
    .catch(err => callback(undefined));
}

export default function JSONSchema(): JSX.Element {
    const [schema, setSchema] = useState(undefined);
    const {colorMode} = useColorMode();
    const JSON_SCHEMA_URL = useBaseUrl("/schema.json");

    useEffect(() => fetchSchema(JSON_SCHEMA_URL, setSchema), []);

    return (
        <Layout
            title={`JSON Schema Viewer`}
            description={`JSON Schema for xxx`}
        >
            {
                (schema !== undefined) &&
                    <JsonSchemaViewer
                        schema={schema}
                        emptyText="No schema found"
                        defaultExpandedDepth={1}
                    />
            }
            {
                (schema === undefined ) && <div>Loading ...</div>
            }
        </Layout>
    )
}

Thanks in advance,

I started my own solution for JSON Schema viewer : https://github.com/jy95/docusaurus-json-schema-plugin — jy95, Jul 08 '23 at 12:44

score 1 · Accepted Answer · answered Aug 04 '23 at 13:54

Hello I am not sure if this will help you but form me I could not add any configuration to the docusaurus config to modify webpack configuration, that is why I tried to encounter this issue by creating a custom loader for my webpack configuration to add some behaviour following those steps:

Create a plugins folder at your project root.
Create a plugin (e.g., custom-loaders) inside the plugins folder with index.js and package.json files:

As noted in the Docusaurus docs for configureWebpack(), the return object highlighted below gets merged into the final webpack config.

Here is an example: /plugins/custom-loaders/index.js

module.exports = function (context, options) {
  return {
    name: 'custom-loaders',
    configureWebpack(config, isServer) {
      return {
        module: {
          rules: [
            {
              test: /\.m?js/,
              resolve: {
                fullySpecified: false
              }
            },
          ],
        },
      };
    },
  };
};

/plugins/custom-loaders/package.json

{
  "name": "custom-loaders",
  "version": "0.0.0",
  "private": true
}

Update Docusaurus configuration file to use the plugin: /docusaurus.config.js

plugins: [
  // ...
  'custom-loaders'
  // ...
]

4.Specify the plugin as a dependency in the package.json at your project root: /package.json

{
  // ...
  "dependencies": {
    // ...
    "custom-loaders": "file:plugins/custom-loaders",
    // ...
  },
    // ...
}

5.Install new plugin dependency for project:

npm i

for more details read this: https://dwf.dev/blog/2022/11/12/2022/updating-docusaurus-webpack-config

Thanks Dina - it could be interesting for other 3rd party libs. In the case of @stoplight one, even with webpacks tweaks, I wasn't pleased by the result (their theme wasn't good looking on Docusaurus) so I wrote my own json schema viewer : [docusaurus-json-schema-plugin](https://github.com/jy95/docusaurus-json-schema-plugin) That project might help you or someone you know one day, who knows ;) — jy95, Aug 05 '23 at 21:20

How to tweak Docusaurus webpack config for some react component?

1 Answers1