React Native(TypeScript) Android端出现Can't find variable: Symbol问题求助

这个问题我之前帮同事排查过，核心原因其实不是TypeScript的编译配置，而是Android端JS引擎的运行时支持不足，加上TypeScript本身不会自动为Symbol这类ES6特性添加polyfill。下面分步骤给你解决方法：

1. 先确认你的JS引擎版本 #

React Native Android端默认用的是JSC（JavaScriptCore），旧版本的JSC对ES6特性的支持不全；如果是用Hermes引擎，要确保你的Hermes版本在0.5以上（现在新的RN版本默认启用Hermes，基本都支持，但旧版本可能需要升级）。

• 检查Hermes是否开启：查看android/app/build.gradle里是否有enableHermes true，如果是false，要么开启Hermes，要么考虑替换JSC。

2. 添加Symbol的Polyfill（最直接的临时方案） #

TypeScript把代码编译到ES5时，不会自动polyfill Symbol这类“新增内置对象”，所以需要手动引入polyfill：

方法一：直接引入core-js #

先安装core-js依赖：

npm install core-js --save
# 或用yarn
yarn add core-js

然后在项目入口文件（比如index.tsx或App.tsx）的最顶部添加：

import 'core-js/es/symbol';
import 'core-js/es/symbol/iterator'; // 如果用到Symbol.iterator相关逻辑，也需要引入

方法二：通过Babel自动注入polyfill #

修改你的babel.config.js，配置@babel/preset-env来自动根据运行环境注入所需的polyfill：

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    [
      '@babel/preset-env',
      {
        targets: {
          ios: '11',
          android: '6'
        },
        useBuiltIns: 'usage',
        corejs: 3 // 需确保安装对应版本的core-js@3
      }
    ]
  ]
};

安装配套依赖：

npm install @babel/preset-env core-js@3 --save-dev

3. 优化TypeScript配置（配合polyfill） #

你的tsconfig.json需要确保这些配置，让TypeScript知道你会提供Symbol的运行时支持：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es6", "es2015.symbol"], // 明确包含Symbol相关的类型库
    "downlevelIteration": true, // 如果用到Symbol.iterator相关的遍历（比如for...of）
    "skipLibCheck": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

4. 替换Android端的JSC引擎（长期解决方案） #

如果不想依赖polyfill，可以替换成原生支持ES6+的JSC版本：
安装react-native-jsc-android：

npm install react-native-jsc-android --save

然后清理Android编译缓存并重新运行：

cd android && ./gradlew clean && cd ..
npx react-native run-android

这个包提供的JSC是更新的版本，完全支持Symbol等ES6特性，不用再担心运行时报错。

验证方案 #

完成上述步骤后，先清理Metro缓存：

npx react-native start --reset-cache

然后重新运行Android项目，应该就不会再出现Can't find variable: Symbol的报错了。

内容的提问来源于stack exchange，提问作者Explosion Pills