NX工作区React项目使用NativeBase出现Module parse failed错误如何解决？

错误原因 #

NativeBase v3.x源码包含未编译的JSX、ES6+语法，NX默认Webpack配置仅转译项目源码文件，不会处理node_modules下的native-base及其依赖包，因此触发loader缺失报错。

解决步骤 #

1. 安装缺失依赖 #

web端使用NativeBase需要依赖react-native-web适配层，首先安装对应依赖：

npm install react-native-web react-native-svg-web
# 或yarn add react-native-web react-native-svg-web

同时废弃已停止维护的babel-preset-es2015，替换为@babel/preset-env：

npm uninstall babel-preset-es2015
npm install @babel/preset-env --save-dev

2. 调整Webpack配置 #

在你当前NX项目的根目录下找到webpack.config.js（如果没有可以通过NX生成自定义配置），添加规则将native-base相关包加入babel转译范围：

const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');

module.exports = composePlugins(withNx(), withReact(), (config) => {
  // 新增babel-loader处理native-base相关模块
  config.module.rules.push({
    test: /\.(js|jsx|ts|tsx)$/,
    include: [
      /node_modules\/native-base/,
      /node_modules\/react-native/,
      /node_modules\/@react-native-aria/,
      /node_modules\/react-native-vector-icons/
    ],
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env', '@babel/preset-react'],
        plugins: ['react-native-web']
      }
    }
  });

  // 添加模块别名适配react-native
  config.resolve.alias = {
    ...config.resolve.alias,
    'react-native$': 'react-native-web',
  };
  config.resolve.extensions.push('.web.js', '.web.jsx', '.web.ts', '.web.tsx');

  return config;
});

3. 调整Babel配置 #

在工作区根目录或项目根目录的babel.config.json中添加对应预设与插件：

{
  "presets": [
    "@nrwl/react/babel",
    ["@babel/preset-env", { "targets": { "browsers": "last 2 versions" } }]
  ],
  "plugins": [
    "react-native-web"
  ]
}

4. 清理缓存重启服务 #

执行命令清理NX缓存后重启开发服务：

nx reset
nx serve <你的项目名>

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