无法使用带有 React 的 OpenAPI TS 模块进行编译 - “您可能需要一个额外的加载器来处理这些加载器的结果”

如何解决无法使用带有 React 的 OpenAPI TS 模块进行编译 - “您可能需要一个额外的加载器来处理这些加载器的结果”

我在 create-react-app 中有一个 web 应用程序，我想在本地导入一个位于 src 之外的模块。但是，加载器和 Webpack 似乎存在一些问题。我不知道为什么会出现这个问题。

目前遇到以下错误：

Failed to compile.

../common/dist/common.js 149:26
Module parse failed: Unexpected token (149:26)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   return (axios = globalAxios,basePath = BASE_PATH) => {
|     const axiosRequestArgs = { ...axiosArgs.options,>       url: (configuration?.basePath || basePath) + axiosArgs.url
|     };
|     return axios.request(axiosRequestArgs);

文件夹结构

    - app
      - common
        - api
          - openapi
            - v1
              - index.ts
              - api.ts
              - base.ts
              - common.ts
            - openapi.json
        - dist
        - package.json
        - tsconfig.json
      - web
        - public
        - src
        - package.json
        - tsconfig.json

app/common/package.json

{
  "name": "@my-module/common","version": "1.0.0","main": "dist/index.js","types": "dist/index.d.ts","dependencies": {
    "axios": "^0.21.1","typescript": "^4.1.3"
  },"devDependencies": {
    "@openapitools/openapi-generator-cli": "^2.1.25"
  },}

app/web/package.json

{
  "name": "jsapi-create-react-app","version": "0.1.0","private": true,"dependencies": {
    ...
    "@my-module/common": "file:../common","axios": "^0.21.1",...
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject",},"eslintConfig": {
    "extends": [
      "react-app","react-app/jest"
    ]
  },"browserslist": {
    "production": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ],"development": [
      "last 1 chrome version","last 1 safari version"
    ]
  },"devDependencies": {
    "ncp": "^2.0.0"
  },"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","main": "index.js","keywords": [],"author": "","license": "ISC"
}

tsconfig.json（两者基本相同，因为我尝试了很多东西，错误没有变化）

{
  "compilerOptions": {
    "target": "es2020","lib": [
      "dom","dom.iterable","esnext","es6"
    ],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx","noImplicitAny": true,"noImplicitThis": true,"strictNullChecks": true,"typeRoots": [
      "./node_modules/@types","./custom_types"
    ]
  }
}

解决方法

您有两个选择：

选项 1 - 使用 react-app-rewired

CRA 对其配置非常有意见。这意味着，您无法在不使用第三方工具（例如 react-app-rewired）的情况下修改其配置。你可以这样做：

1. 运行npm install --save-dev react-app-rewired react-app-rewire-alias customize-cra
2. 将 package.json -> 脚本更新为：

  "scripts": {
   "start": "react-scripts start",
   "start": "react-app-rewired start","build": "react-scripts build","build": "react-app-rewired build","test": "react-scripts test","test": "react-app-rewired test","eject": "react-scripts eject"
}

4. 在根文件夹中创建一个名为 config-overrides.js 的文件：

const { override } = require("customize-cra");
const { alias } = require("react-app-rewire-alias");

const aliasMap = {
  common: "../common",};

module.exports = override(
  alias(aliasMap)
);

简而言之react-app-rewire-alias：

目前，create-react-app (CRA) 不支持项目中的多个 src 目录。 Monorepo、多存储库和带有示例的库项目需要多个目录，例如 src。

选项 2 - 使用 monorepo 库

有很多选择，其中之一是 lerna。您可以将这两个项目移动到 packages 文件夹中，然后对它们进行符号链接。换句话说，不是相对地导入您的公共代码（例如“../../../common/...”），而是从依赖项（例如“@myapp/common/...”）导入它. You can learn more about lerna here。

,

这似乎是一个版本问题：较新的 OpenAPI 版本 (5.x) 会生成导致此错误的代码。以下是我解决此问题的步骤：

mkdir ~/openapi && cd ~/openapi
wget https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/4.3.1/openapi-generator-cli-4.3.1.jar -O openapi-generator-cli-4.3.1.jar

echo "#\!/bin/bash" > openapi-generator
echo "java -jar $HOME/openapi/openapi-generator-cli-4.3.1.jar \$@" >> openapi-generator
chmod +x openapi-generator

然后将 $HOME/openapi 添加到 $PATH 并生成代码，一切正常。