博览会错误：编译JS失败：无法识别的字符'@'

Question

我在谷歌上幸运搜索后得到了答案，所以我决定在这里分享这个，以便更容易找到解决方案

expo start

之后，Android模拟器显示错误消息

Compiling JS failed: XX:XX: unrecognized character '@'

对于任何 JS 解析问题，您可以直接在bundle处打开浏览器来检查错误位置，看看发生了什么。

对于默认主机和端口开放： http://127.0.0.1:8081/

在 JSON 对象内部，将有一个位于

$.launchAsset.url

的 URL，您可以使用它来访问捆绑的 JS 文件

Answer 1

字符“@”很可能与注释相关。就我而言，这是由 InversifyJS 引起的，并且与 babel 如何处理注释转换有关

可能的解决方案：

1. 配置 babel 变压器，如此评论建议
2. 使用打字稿速记构造函数语法，如此评论建议

相关 inversify github 问题：

• #1113
• #1007
• #1050

Answer 2

在我的项目中，我遇到了由

babel

和

inversify

@inject 指令使用引起的相同问题。我虽然使用了

Metro

服务器（不是

Expo

），但我相信解决方案一定是类似的。我找不到独立的解决方案。 经过多次尝试和错误，我找出了最少的改变，最终解决了问题。

注意：在这种情况下，

Babel

非常令人恼火。每次，我在

babel.config.js

中更改某些内容时，都必须重新启动/关闭并打开 VS 代码才能使更改生效。还有其他

Eslint

问题困扰着我们，但这些问题与本主题无关。

首先，我将这个

@babel/plugin-proposal-decorators

添加到我的 devDependencies >>

npm i @babel/plugin-proposal-decorators --save-dev

。

然后，将

["@babel/plugin-proposal-decorators", { legacy: true }]

添加到

babel.config.ts

，如下所示（经过试验和错误）> 重新启动 vs 代码。

module.exports = {
  presets: ["module:@react-native/babel-preset"],
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    "nativewind/babel",
  ],
};

我也可以确保我的

tsconfig.json

中有这些。 （其中有些可能没有直接关系。有些与修复 eslint 问题有关，有些与

inversify

设置<

lib, types, emitDecoratorMetadata, experimentalDecorators

等有关>。）

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "target": "ES2020",
    "forceConsistentCasingInFileNames": true,
    "lib": ["ES2020", "ES6", "ES2022", "ESNext"],
    "types": ["reflect-metadata"],
    "module": "ESNext",

    "moduleResolution": "bundler",

    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

最后一件事，我像这样使用

@inject

作为构造函数注入 -

@injectable()
class Ninja implements Warrior {    
    private _katana: Weapon;

    public constructor(
        @inject(TYPES.Weapon) katana: Weapon,
    ) { this._katana = katana; }

    public fight() { return this._katana.hit(); }    
}    

我将其更改为如下使用（属性注入），瞧！

@injectable()
class Ninja implements Warrior {
    @inject(TYPES.Weapon) private _katana: Weapon;

    public fight() { return this._katana.hit(); }
}

我希望它能为某人节省很多时间！