使用最新Swagger-ui-react搭配NX与webpack构建时出错求助

在NX React项目中集成swagger-ui-react@5.11.0时，执行pnpm nx run swagger-ui-demo:serve可正常启动应用并显示Swagger UI，但执行pnpm nx run swagger-ui-demo:build构建命令时，PostCSS加载器报错无法解析SVG Data URI。使用旧版本swagger-ui-react@3.52.5时无此问题。

错误信息：

ERROR in ../../node_modules/.pnpm/swagger-ui-react@5.11.0_@types+react@18.0.28_react-dom@18.2.0_react@18.2.0/node_modules/swagger-ui-react/swagger-ui.css (../../node_modules/.pnpm/swagger-ui-react@5.11.0_@types+react@18.0.28_react-dom@18.2.0_react@18.2.0/node_modules/swagger-ui-react/swagger-ui.css.webpack[javascript/auto]!=!../../node_modules/.pnpm/css-loader@6.9.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[4].use[1]!../../node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.4.33_webpack@5.89.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[4].use[2]!../../node_modules/.pnpm/swagger-ui-react@5.11.0_@types+react@18.0.28_react-dom@18.2.0_react@18.2.0/node_modules/swagger-ui-react/swagger-ui.css)
Module Error (from ../../node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.4.33_webpack@5.89.0/node_modules/postcss-loader/dist/cjs.js):
<css input>:191:8: Can't resolve '&quot;data:image/svg+xml;charset=utf-8,<svg xmlns=/&quot;http://www.w3.org/2000/svg/&quot; width=/&quot;24/&quot; height=/&quot;24/&quot;><path d=/&quot;M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z/&quot;/></svg>&quot;' in '/Users/ameshram/workspaces/react_workspaces/nx_demo/react-monorepo/node_modules/.pnpm/swagger-ui-react@5.11.0_@types+react@18.0.28_react-dom@18.2.0_react@18.2.0/node_modules/swagger-ui-react'

项目关键代码与配置：

• App.tsx：

import React from 'react';
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

function App() {
  return <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />;
}

export default App;

• webpack.config.js：

const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

module.exports = composePlugins(withNx(), withReact(), (config) => {
  return config;
});

1. 修改css-loader配置，忽略Data URI解析 #

css-loader默认会尝试解析url()中的所有内容，包括错误转义的Data URI。可以通过配置让它跳过Data URI的解析：

修改webpack.config.js：

const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

module.exports = composePlugins(withNx(), withReact(), (config) => {
  // 遍历webpack规则，找到css-loader并修改配置
  config.module.rules.forEach(rule => {
    if (rule.oneOf) {
      rule.oneOf.forEach(oneOfRule => {
        if (oneOfRule.use?.some(use => use.loader?.includes('css-loader'))) {
          oneOfRule.use.forEach(use => {
            if (use.loader?.includes('css-loader')) {
              use.options = {
                ...use.options,
                url: {
                  filter: (url) => {
                    // 只处理真实文件路径，忽略Data URI
                    return !url.startsWith('data:');
                  }
                }
              };
            }
          });
        }
      });
    }
  });

  return config;
});

2. 用PostCSS插件修复转义引号 #

swagger-ui-react@5.x的CSS文件中存在错误的引号转义（如/"），可以通过PostCSS插件替换这些转义字符：

1. 安装插件：

pnpm add -D postcss-replace

2. 在项目根目录创建postcss.config.js：

module.exports = {
  plugins: [
    require('postcss-replace')({
      pattern: /\/"/g,
      data: '"'
    }),
    require('postcss-replace')({
      pattern: /"/g,
      data: ''
    })
  ]
};

3. 调整依赖版本 #

• 升级css-loader到最新版本（如^6.10.0），新版本可能修复了Data URI解析的兼容性问题：

pnpm update css-loader -D

• 或者降级swagger-ui-react到5.x早期版本（如5.9.0），验证是否存在同样的问题：

pnpm add swagger-ui-react@5.9.0

4. 替代方案：改用CDN加载样式 #

如果上述方法均无效，可以移除本地CSS引入，改用CDN加载Swagger UI样式：

修改App.tsx：

import React, { useEffect } from 'react';
import SwaggerUI from 'swagger-ui-react';

function App() {
  useEffect(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdn.jsdelivr.net/npm/swagger-ui-react@5.11.0/swagger-ui.css';
    document.head.appendChild(link);
    return () => document.head.removeChild(link);
  }, []);

  return <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />;
}

export default App;

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