React Native-Web开发报错：找不到变量Symbol，求解决方案

我正在开发一个React-Native-Web（RNW）应用，核心应用会引入一个作为node包的自定义React-Native组件库。
该组件库同样是RNW应用，我使用StoryBook进行独立开发。

当我通过npm i ...从git将组件库安装到核心应用，并在src目录的App.js中引入后，出现如下错误：

ReferenceError: Can't find variable: Symbol
This error is located at:
in Styled(SimpleList) (created by App)
in RCTView (created by View)
in View (created by App)
in App (created by NativeApp)
in NativeApp
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer

我尝试安装了es6-symbol包，但似乎没有效果。

恳请提供解决建议？

这个问题本质是React Native Web环境下缺少Symbol这个ES6特性的全局支持，光装es6-symbol包还不够，得确保它被正确注入到全局环境中，并且构建流程能正确处理。给你几个具体的方案试试：

方案一：配置Babel注入Symbol #

1. 先安装必要的Babel依赖：

npm install --save-dev @babel/plugin-transform-runtime @babel/runtime-corejs3

2. 在核心应用的babel.config.js（或.babelrc）里添加以下配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 3,
        helpers: true,
        regenerator: true,
        useESModules: false
      }
    ]
  ]
};

CoreJS 3会自动提供包括Symbol在内的ES6+全局polyfill，从根源上解决找不到Symbol的问题。

方案二：手动在入口文件引入全局polyfill #

如果Babel配置的方式没生效，你可以直接在核心应用的入口文件（比如index.js或App.js最顶部）手动引入polyfill：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

先安装对应的依赖：

npm install core-js regenerator-runtime --save

这样能确保所有ES6+特性都被全局注入，覆盖包括Symbol在内的缺失API。

方案三：检查组件库的构建配置 #

你的组件库是独立开发的RNW项目，可能它的构建产物没有包含必要的polyfill，导致在核心应用中运行时缺失Symbol。可以做这两步：

• 确保组件库的Babel配置同样使用了CoreJS polyfill，或者在组件库的入口文件中引入polyfill后再打包；
• 检查组件库package.json里的main字段，确认指向的是正确的转译后产物，避免核心应用直接引入未处理的源码。

方案四：使用React Native专用polyfill包 #

react-native-polyfill-globals是专门为React Native环境打造的全局polyfill工具，安装后在入口文件引入即可：

npm install react-native-polyfill-globals --save

然后在核心应用入口顶部添加：

import 'react-native-polyfill-globals/auto';

它会自动处理包括Symbol在内的各种全局API缺失问题，步骤简单见效快。

建议先从方案一或者方案四开始尝试，这两个是最常见的解决方式，大概率能搞定你的问题。

内容的提问来源于stack exchange，提问作者Tim Smart