Metro Config Cause Import Error when Bundling React Native App on Github Actions

[Pietro-Putelli]

I'm working on a bare React Native (v. 0.73.5) project using Expo. I have set up the Fastlane pipeline that runs on GitHub Actions, but it breaks just at the end of the build when Metro is started. The error that occurs is a problem with the import, but it is correct. So I think the problem might be with the metro.config.js file or with the babel.config.js file since I'm using imports of the following form, for example: import ... from "@components/..".

Now to reproduce the step that cause the error I jsut run: npx react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios --verbose to build the app, but instead of on the github actions, on my local machine it works without import errors.

Here is my metro.config.js, note that I'm importing metro config from expo because I'm using expo modules in bare app:

const {getDefaultConfig: getExpoDefaultConfig} = require('expo/metro-config');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const config = getExpoDefaultConfig(__dirname);

const {transformer, resolver} = config;

config.transformer = {
  ...transformer,
  babelTransformerPath: require.resolve('react-native-svg-transformer'),
  assetPlugins: ['expo-asset/tools/hashAssetFiles'],
};

config.resolver = {
  ...resolver,
  assetExts: resolver.assetExts.filter(ext => ext !== 'svg'),
  sourceExts: [...resolver.sourceExts, 'svg'],
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Here's the babel.config.js:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    ['module:react-native-dotenv'],
    [
      'module-resolver',
      {
        alias: {
          '@/components': './src/components',
          ...
      },
    ],
    'react-native-reanimated/plugin',
    '@babel/plugin-transform-export-namespace-from',
  ],
};

Essentially, my problem is that the bundling fails when run on GitHub Actions. In particular, it fails because it can't find an import that actually exists. On the other hand, the app works fine on my local machine, and even the Fastlane build works.

[robhogan]

Hi @Pietro-Putelli - there's a lot going on here but it feels unlikely GitHub Actions is related as such, and more likely that your project layout isn't the same between your local build and the GA build - e.g., how are you installing node_modules in both cases? Does it still work locally if you make a fresh clone and follow the same steps as your action?

Looking at the config, I'd recommend against using Babel's module-resolver, and prefer either standard Node-compatible patterns or using a custom Metro resolver. It looks though like what you're doing should be achievable with Yarn workspaces and no Babel/Metro customisation.

Likely unrelated but I'd also recommend against react-native-dotenv because Metro doesn't treat .env file contents as inputs to the transform cache key, so it can lead to stale cache issues unless you --reset-cache between any env change.

Beyond that, we'd need a reproducible example (a repo that exhibits the problem) to verify any bug here.