CRA + Inversify @inject 模块解析失败：意外字符'@'答案

【问题标题】：CRA + Inversify @inject Module parse failed: Unexpected character '@'CRA + Inversify @inject 模块解析失败：意外字符'@'
【发布时间】：2021-12-06 23:22:47
【问题描述】：

这是我得到的错误

./src/core/providers/todoApi/TodoApiProvider.ts 10:14 模块解析失败：意外字符“@”（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,
  },
}

【问题讨论】：

标签： javascript reactjs constructor create-react-app inversifyjs

【解决方案1】：

stage 1 和 stage 2 装饰器提案都不支持参数装饰器。实现提案的@babel/plugin-proposal-decorators 不知道如何处理参数装饰器。结果，产生了错误消息Unexpected character '@'。只有 Typescript 知道 parameter decorators。

我使用 Next.js 而不是 CRA，但我相信这是同样的问题。对于 Next.js，我通过安装 ts-loader 并配置 Next.js webpack 配置以在 babel-loader 之前使用 ts-loader 解决了这个问题。

下面的 sn-p 特定于 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 解决了它。

【讨论】：