如何在React Native Web中使用react-native-qrcode-svg？遇模块解析错误

这个错误是因为webpack默认不会转译node_modules中的JSX文件，而react-native-qrcode-svg的源码使用了JSX语法，同时你需要正确配置react-native-svg-web来替换原生的react-native-svg依赖。按以下步骤解决：

• 安装必要依赖：

  npm install --save-dev babel-loader @babel/preset-react react-native-svg-web
  # 或使用yarn
  yarn add -D babel-loader @babel/preset-react react-native-svg-web
  

• 修改webpack配置文件（如webpack.config.js）：

  module.exports = {
    // ...其他已有配置
    module: {
      rules: [
        // ...你的其他loader规则
        {
          test: /\.(js|jsx)$/,
          include: /node_modules\/react-native-qrcode-svg/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react']
            }
          }
        },
        // 配置svg文件处理
        {
          test: /\.svg$/,
          use: ['babel-loader', 'react-native-svg-web-loader']
        }
      ]
    },
    // 配置别名替换react-native-svg为web版本
    resolve: {
      alias: {
        'react-native-svg': 'react-native-svg-web'
      }
    }
  };
  

• 重新启动开发服务器，编译错误即可解决。

原理说明：

• 让webpack通过babel-loader转译react-native-qrcode-svg的源码，解析其中的JSX语法；
• 通过别名将react-native-svg指向react-native-svg-web，保证在web环境下依赖能正常工作。

内容的提问来源于stack exchange，提问作者new learner