我在尝试构建使用 swagger-ui-react 组件的简单 nx 应用程序时遇到错误。
以下是错误
ERROR in ../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/swagger-ui-react/swagger-ui.css (../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/swagger-ui-react/swagger-ui.css.webpack[javascript/auto]!=!../../node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[4].use[1]!../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[4].use[2]!../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/swagger-ui-react/swagger-ui.css)
Module Error (from ../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/postcss-loader/dist/cjs.js):
<css input>:191:8: Can't resolve '"data:image/svg+xml;charset=utf-8,<svg xmlns=/"http://www.w3.org/2000/svg/" width=/"24/" height=/"24/"><path d=/"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z/"/></svg>"' in '/Users/ameshram/workspaces/react_workspaces/nx_demo/react-monorepo/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/swagger-ui-react'
应用程序.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');
// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
return config;
});
package.json
{
"name": "react-monorepo",
"version": "0.0.0",
"license": "MIT",
"scripts": {},
"private": true,
"dependencies": {
"react": "18.2.0",
"react-dom": "18.2.0",
"tslib": "^2.3.0",
"swagger-ui-react": "~5.11.0"
},
"devDependencies": {
"@babel/preset-react": "^7.14.5",
"@nrwl/cypress": "15.9.5",
"@nrwl/eslint-plugin-nx": "15.9.5",
"@nrwl/jest": "15.9.5",
"@nrwl/js": "15.9.5",
"@nrwl/linter": "15.9.5",
"@nrwl/nx-cloud": "latest",
"@nrwl/react": "15.9.5",
"@nrwl/webpack": "15.9.5",
"@nrwl/workspace": "15.9.5",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
"@svgr/webpack": "^6.1.2",
"@testing-library/react": "14.0.0",
"@types/jest": "^29.4.0",
"@types/node": "18.14.2",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^5.36.1",
"babel-jest": "^29.4.1",
"cypress": "^12.17.4",
"eslint": "~8.15.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"jest": "^29.4.1",
"jest-environment-jsdom": "^29.4.1",
"nx": "15.9.5",
"prettier": "^2.6.2",
"react-refresh": "^0.10.0",
"react-test-renderer": "18.2.0",
"ts-jest": "^29.0.5",
"ts-node": "10.9.1",
"typescript": "~4.9.5",
"url-loader": "^4.1.1",
"@types/swagger-ui-react": "~4.18.3"
}
}
项目.json
{
"name": "swagger-ui-demo",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/swagger-ui-demo/src",
"projectType": "application",
"targets": {
"build": {
"executor": "@nrwl/webpack:webpack",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"compiler": "babel",
"outputPath": "dist/apps/swagger-ui-demo",
"index": "apps/swagger-ui-demo/src/index.html",
"baseHref": "/",
"main": "apps/swagger-ui-demo/src/main.tsx",
"tsConfig": "apps/swagger-ui-demo/tsconfig.app.json",
"assets": [
"apps/swagger-ui-demo/src/favicon.ico",
"apps/swagger-ui-demo/src/assets"
],
"styles": ["apps/swagger-ui-demo/src/styles.css"],
"scripts": [],
"isolatedConfig": true,
"webpackConfig": "apps/swagger-ui-demo/webpack.config.js"
},
"configurations": {
"development": {
"extractLicenses": false,
"optimization": false,
"sourceMap": true,
"vendorChunk": true
},
"production": {
"fileReplacements": [
{
"replace": "apps/swagger-ui-demo/src/environments/environment.ts",
"with": "apps/swagger-ui-demo/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false
}
}
},
"serve": {
"executor": "@nrwl/webpack:dev-server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "swagger-ui-demo:build",
"hmr": true
},
"configurations": {
"development": {
"buildTarget": "swagger-ui-demo:build:development"
},
"production": {
"buildTarget": "swagger-ui-demo:build:production",
"hmr": false
}
}
},
"lint": {
"executor": "@nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["apps/swagger-ui-demo/**/*.{ts,tsx,js,jsx}"]
}
},
"serve-static": {
"executor": "@nrwl/web:file-server",
"options": {
"buildTarget": "swagger-ui-demo:build"
}
},
"test": {
"executor": "@nrwl/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "apps/swagger-ui-demo/jest.config.ts",
"passWithNoTests": true
},
"configurations": {
"ci": {
"ci": true,
"codeCoverage": true
}
}
}
},
"tags": []
}
如果我使用以下命令
runpnpm nx run swagger-ui-demo:serve
如果我使用以下命令
buildpnpm nx run swagger-ui-demo:build
我在使用旧版本的 swagger-ui-react（即 3.52.5）时没有收到此错误。在升级到 swagger-ui-react 5.11.0 时，只有我收到此错误。
有人能指出我正确的方向吗？谢谢
我也遇到了完全相同的问题。我最终将代码中的文件复制到
swagger-ui.scssScss 加载器加载此样式没有任何问题。