CRA + Inversify @inject 模塊解析失敗：意外字符“@”

Question

這是我得到的錯誤

./src/core/providers/todoApi/TodoApiProvider.ts 10:14 Module parse failed: Unexpected character '@' (10:14) 文件是用這些加載程序處理的：

• ./node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
• ./node_modules/babel-loader/lib/index.js 你可能需要一個額外的加載器來處理這些加載器的結果。 | 類 TodoApiProvider {

構造函數(@inject(TYPES.HttpClient) | httpClient) { | this.httpClient = void 0;

TodoApiProvider.ts

class DefaultTodoApiProvider implements TodoApiProvider {
  private httpClient: HttpClient;

  // @inject(TYPES.HttpClient) return error
  constructor(@inject(TYPES.HttpClient) httpClient: HttpClient) {
    this.httpClient = Dependency.get(TYPES.HttpClient);
  }

  async getTodoById(id: string) {
    const data = await this.httpClient.get(
      `https://jsonplaceholder.typicode.com/todos/${id}`
    );

    return data;
  }
}

decorate(injectable(), TodoApiProvider);

export default DefaultTodoApiProvider;

如果我將@inject(TYPES.HttpClient)放在private httpClient: HttpClient; 它會得到另一個錯誤Cannot access 'TYPES' before initialization 。

.babelrc

{
  "presets": [
    ...,
    "@babel/preset-typescript"
  ],
  "plugins": [
    ...,
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-require-context",
        "babel-plugin-transform-typescript-metadata",
        "babel-plugin-parameter-decorator"
      ]
    }
  }
}

tsconfig.js

{
  "compilerOptions": {
    ...,
    "emitDecoratorMetadata": false,
  },
}

Answer 1

stage 1和stage 2裝飾器提議都不支持參數裝飾器。 實現提案的@babel/plugin-proposal-decorators不知道如何處理參數裝飾器。 結果，產生了錯誤消息Unexpected character '@' 。 只有 Typescript 知道參數裝飾器。

我使用 Next.js 而不是 CRA，但我相信這是同樣的問題。 對於 Next.js，我通過安裝ts-loader並配置 Next.js webpack 配置在 babel-loader 之前使用 ts-loader 解決了這個問題。

下面的代碼片段特定於 Next.js。 我引用它來澄清我的觀點。

config.module.rules.forEach((rule) => {
  if (rule.test instanceof RegExp && rule.test.test(".ts")) {
    if (Array.isArray(rule.use)) {
      rule.use.push("ts-loader");
    } else {
      rule.use = [rule.use, "ts-loader"];
    }
  }
});

關於在初始化之前訪問 TYPES，我沒有調查它為什么會發生，因為在修復第一個問題時也使用ts-loader解決了它。