React Native Web项目使用AsyncStorage运行报错求助

这个问题的根源很明确：你安装的@react-native-community/async-storage库源码里使用了Flow类型注解，而你的Webpack配置没有配置对应的工具来处理这种语法，导致解析失败。而Android端能正常运行是因为React Native的默认打包工具Metro本身就支持Flow语法，不需要额外配置。

下面是具体的解决步骤：

1. 安装Flow相关的Babel插件/预设 #

你需要用Babel来剥离Flow的类型注解，有两种方式可选：

方式一：使用@babel/preset-flow #

安装依赖：

npm install --save-dev @babel/preset-flow

方式二：使用transform-flow-strip-types插件 #

安装依赖：

npm install --save-dev babel-plugin-transform-flow-strip-types

2. 修改Babel配置 #

根据你选择的方式，更新你的Babel配置文件（比如babel.config.js或者.babelrc）：

如果用@babel/preset-flow：

module.exports = {
  presets: [
    // 保留你原有的presets，比如用于react-native-web的预设
    '@babel/preset-flow'
  ]
};

如果用transform-flow-strip-types插件：

module.exports = {
  plugins: [
    // 保留你原有的plugins
    'transform-flow-strip-types'
  ]
};

3. 让Webpack转译这个库 #

默认情况下，Webpack会跳过node_modules目录下的文件转译，所以需要修改Webpack配置，让babel-loader处理@react-native-community/async-storage：

在你的Webpack配置文件中，找到module.rules里的babel-loader规则，修改exclude选项：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 排除node_modules，但不排除async-storage
        exclude: /node_modules(?!\/@react-native-community\/async-storage)/,
        use: 'babel-loader'
      }
    ]
  }
};

完成这些配置后，重启你的Webpack开发服务器，应该就能正常解析这个库了。

内容的提问来源于stack exchange，提问作者Talha Arshad