reactjs - Babel - .js 文件中具有 JSX 语法的节点模块会破坏编译

Question

导入在 .JS 文件中使用 JSX 语法的模块时出现 SyntaxError。

这方面的一个例子是“反应导航”

Failed to compile.

./node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js
SyntaxError: /Users/my_user/Projects/my-react-native-web-app/node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js: Unexpected token(35:11)

  33 |     } = this.props;
  34 |
> 35 |     return <View style={styles.container} collapsable={false} removeClippedSubviews={Platform.OS === 'android' ? removeClippedSubviews: !isFocused && removeClippedSubviews}>
     |            ^
  36 |         <View style={this._mustAlwaysBeVisible() || isFocused ?styles.innerAttached : styles.innerDetached}>
  37 |           {awake ? <SceneView {...rest} navigation={childNavigation} /> : null}
  38 |         </View>

下面是我的 babel 配置：

module.exports = function(api) {
    api.cache(true);
    return {
        plugins: [
            [
                "@babel/plugin-proposal-class-properties",
                {
                    loose: true
                }
            ],
            [
                "module-resolver",
                {
                    alias: {
                        "^react-native$": "react-native-web"
                    }
                }
            ]
        ],
        presets: [["react-app"], ["babel-preset-expo"]]
    };
};

希望有人知道发生了什么

谢谢 ：）

Answer 1

你必须明确告诉 webpack 转译react-navigation.

      // Process JS with Babel.
      {
        test: /\.(js|jsx|mjs)$/,
        include: [
          `${paths.appNodeModules}/react-navigation`,

参考：webpack.config.dev.js#L141