如何调整Docusaurus的Webpack配置适配@stoplight/json-schema-viewer组件？

当在Docusaurus中使用@stoplight/json-schema-viewer时，若按旧方案调整Webpack配置未生效，可按以下步骤排查修复：

1. 修正Webpack配置（适配新版Docusaurus） #

旧方案可能针对早期Docusaurus版本，新版需在docusaurus.config.js中通过webpack.configure字段修改配置，确保转译@stoplight相关依赖：

module.exports = {
  // 其他原有配置...
  webpack: {
    configure: (config) => {
      config.module.rules.push({
        test: /\.js$/,
        include: [
          require.resolve('@stoplight/json-schema-viewer'),
          require.resolve('@stoplight/mosaic'),
          require.resolve('@stoplight/prism-syntax-highlighter'),
          require.resolve('@stoplight/ui-kit'),
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@docusaurus/babel-preset'],
          },
        },
      });
      return config;
    },
  },
};

2. 安装必要的Babel依赖 #

若项目未安装相关依赖，执行以下命令：

npm install --save-dev babel-loader @docusaurus/babel-preset

3. 清理缓存并重启服务 #

Docusaurus会缓存Webpack配置，修改后需清理缓存再启动：

npm run clear
npm run start

4. 引入组件样式文件 #

@stoplight/json-schema-viewer需要加载自身样式，在你的json_schema.tsx中添加：

import "@stoplight/json-schema-viewer/dist/index.css";

5. 排查控制台错误 #

若仍有问题，查看浏览器控制台的错误信息：

• 若出现Unexpected token 'export'等语法错误，说明还有未被转译的依赖包，将其添加到Webpack配置的include列表中
• 若出现样式缺失，确认样式文件是否正确引入

内容的提问来源于stack exchange，提问作者jy95