Babel issues while running within react-navigation

[justinmakaila]

Hi, I'm writing a web/native app using react-navigation and react-native-web. Whenever I attempt to run it on the web, I get this issue from webpack:

ERROR in ../../../.yarn/unplugged/react-native-virtual-f8f4313058/node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js 14:12
Module parse failed: Unexpected token (14:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| import requireNativeComponent from '../../Libraries/ReactNative/requireNativeComponent';
> import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';
| import UIManager from '../ReactNative/UIManager';
| 
 @ ../../../.yarn/unplugged/react-native-safe-area-context-virtual-06227a2083/node_modules/react-native-safe-area-context/lib/module/specs/NativeSafeAreaView.js 2:0-93 4:15-37
 @ ../../../.yarn/unplugged/react-native-safe-area-context-virtual-06227a2083/node_modules/react-native-safe-area-context/lib/module/SafeAreaView.js 4:0-60 10:42-60
 @ ../../../.yarn/unplugged/react-native-safe-area-context-virtual-06227a2083/node_modules/react-native-safe-area-context/lib/module/index.js 2:0-31 2:0-31
 @ ../../../.yarn/__virtual__/@react-navigation-stack-virtual-d8b1a8d7f0/0/cache/@react-navigation-stack-npm-6.2.2-ec46281444-27cb45e149.zip/node_modules/@react-navigation/stack/lib/module/views/Header/Header.js 6:0-67 20:17-34
 @ ../../../.yarn/__virtual__/@react-navigation-stack-virtual-d8b1a8d7f0/0/cache/@react-navigation-stack-npm-6.2.2-ec46281444-27cb45e149.zip/node_modules/@react-navigation/stack/lib/module/index.js 14:0-58 14:0-58
 @ ../src/navigators/App/index.tsx 3:0-63 5:12-32
 @ ../src/navigators/index.tsx 4:0-37 16:38-50
 @ ../src/index.tsx 3:0-42 5:42-52
 @ ../index.web.js 2:0-24 8:9-12

Here's my babel config:

module.exports = {
  presets: [
    "@babel/preset-typescript",
    "@babel/preset-env",
    "@babel/preset-flow",
    "@babel/preset-react"
  ],
  plugins: [
    ["@babel/plugin-proposal-class-properties", { loose: true }],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-optional-catch-binding",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-transform-react-display-name",
    "@babel/plugin-transform-react-jsx-source",
    "@babel/plugin-transform-react-jsx",
    "react-native-web"
  ]
};

Webpack config

const path = require('path');
const webpack = require('webpack');
const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

const appDirectory = path.resolve(__dirname, '../')

const babelLoaderConfiguration = {
  test: /\.(ts|tsx|js|jsx)$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
  ],
  use: {
    loader: require.resolve('babel-loader'),
    options: {
      configFile: path.resolve(appDirectory, 'babel.config.js')
    }
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: require.resolve('url-loader'),
    options: {
      name: '[name].[ext]',
    },
  },
};

module.exports = {
  mode: 'development',
  target: 'web',

  entry: path.resolve(appDirectory, 'index.web.js'),

  output: {
    filename: 'bundle.web.js',
    path: path.resolve('dist'),
  },

  plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
        },
      },
      __DEV__: process.env.NODE_ENV !== 'production' || true,
    }),
  ],

  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },

  externals: {
    "react-native": true
  },

  resolve: {
    plugins: [
      PnpWebpackPlugin
    ],
    extensions: [
      '.js', 
      '.jsx', 
      '.ts', 
      '.tsx',
      '.mjs',
      '.web.js', 
      '.web.jsx',
      '.web.ts', 
      '.web.tsx',
      '.web.mjs'
    ],
    alias: {
      "react-native$": "react-native-web"
    }
  },
  resolveLoader: {
    plugins: [
      PnpWebpackPlugin.moduleLoader(module),
    ],
  },
};

Any ideas? I can't figure out why it's seemingly not able to transpile the code.

[joelain]

Getting the exact same error. Did you manage to fix this @justinmakaila?

[rborn]

Same here, but with a nextjs project. Any ideas? 🙏 @janicduplessis

[joelain]

I was able to solve this by processing the react-native and @react-native packages with the babel-loader. See this discussion about the exact issue: https://github.com/babel/babel/discussions/11694

        {
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          include: [
            /node_modules\/react-native/,
            /node_modules\/@react-native/,
          ],
          use: {
            loader: 'babel-loader',
            options: {
              // Disable reading babel configuration
              babelrc: false,
              configFile: false,
              sourceType: "module",
              plugins: [
                [
                  require.resolve('babel-plugin-react-native-web'), // <-- from the react-native-web install docs
                ],
              ],
              presets: [
                [
                  require.resolve('babel-preset-react-app/dependencies'), // <--- this fixes some module detection issues
                  {
                    helpers: true
                  },
                ],
                ['babel-preset-react-app'], // <--- this is the preset that will transpile everything for web (its the one used by CRA)
              ],
              cacheDirectory: true,
              cacheCompression: false,
              compact: false,
            },
          },
        },

[jacobp100]

This is from the package json -

  "main": "lib/commonjs/index.js",
  "module": "lib/module/index.js",
  "react-native": "src/index.tsx",
  "types": "lib/typescript/index.d.ts",
  "source": "src/index.tsx",

It looks like an issue with your configuration

[jacobp100]

Closing as it's not a library issue. Feel free to continue discussion here though