[React-Native]: Require FS (bindings problem)

[IronTony]

How frequently does the bug occur?

All the time

Description

Hello,

after the fix for the submit-analytics (here is the issue and the thread), I have another problem during app launching.
As you can see in the screenshot below, I installed realm@hermes branch (10.20.0-beta.5), but unfortunately I have this problem now (both on iOS and Android, RN version 0.67.4):

Any hint? Thank you as usual

Stacktrace & log output

No response

Can you reproduce the bug?

Yes, always

Reproduction Steps

After the successful compilation with Xcode/Android Studio/Terminal, during the server start compilation

Version

10.20.0-beta.5

What SDK flavour are you using?

Local Database only

Are you using encryption?

No, not using encryption

Platform OS and version(s)

Both iOS and Android

Build environment

No response

Cocoapods version

No response

[kraenhansen]

@IronTony can you share your current Metro and Babel configurations?

[IronTony]

@kraenhansen here it is:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require('metro-config');
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    ...defaultResolver,
    sourceExts: [...defaultResolver.sourceExts, 'cjs'],
  },
};

BABEL CONFIG

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.ios.js', '.android.js', '.ios.jsx', '.android.jsx', '.js', '.jsx', '.json', '.ts', '.tsx'],
        root: ['.'],
        alias: {
          '@assets': './src/assets',
          '@components': './src/components',
          '@constants': './src/constants',
          '@contexts': './src/contexts',
          '@graphql': './src/graphql',
          '@hooks': './src/hooks',
          '@i18n': './src/i18n',
          '@redux': './src/redux',
          '@routes': './src/routes',
          '@scenes': './src/scenes',
          '@services': './src/services',
          '@theme': './src/theme',
          '@utils': './src/utils',
          '@env': './src/env.js',
          '@types': './src/types',
          '@db': './src/db',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

[kraenhansen]

What happens if you add '.native.js' to the start of the extensions array of the Babel "module-resolver"?

[IronTony]

I have added like this:

extensions: [
          '.ios.js',
          '.android.js',
          '.ios.jsx',
          '.android.jsx',
          '.js',
          '.jsx',
          '.json',
          '.ts',
          '.tsx',
          '.native.js',
        ],

but the result is same error 😢

[kraenhansen]

Have you tried running the react-native CLI with --reset-cache?

[IronTony]

Yes always. To be sure I have delete node_modules, yarn.lock, and pods and reinstalled from scratch

[kraenhansen]

Okay - I just reproduced this locally and found a fix.

Add a resolverMainFields to your Metro "resolver" configuration:

  resolver: {
    ...defaultResolver,
    sourceExts: [...defaultResolver.sourceExts, 'cjs'],
    resolverMainFields: ['react-native', ...defaultResolver.resolverMainFields],
  },

I have no idea why the getDefaultConfig.getDefaultValues() doesn't include "react-native" in the resolverMainFields. I'll try to do a bit more digging on why that is.

[kraenhansen]

What's happening here is that the Metro default of this property is ["browser", "main"] but when invoked via the React Native CLI it gets overwritten with ["react-native", "browser", "main"]: https://github.com/react-native-community/cli/blob/master/packages/cli-plugin-metro/src/tools/loadMetroConfig.ts#L85

I think that's pretty unfortunate and I'd love to get that updated.

[IronTony]

Okay - I just reproduced this locally and found a fix.

Add a resolverMainFields to your Metro "resolver" configuration:

  resolver: {
    ...defaultResolver,
    sourceExts: [...defaultResolver.sourceExts, 'cjs'],
    resolverMainFields: ['react-native', ...defaultResolver.resolverMainFields],
  },

I have no idea why the getDefaultConfig.getDefaultValues() doesn't include "react-native" in the resolverMainFields. I'll try to do a bit more digging on why that is.

And YES!
Now it works...finally!! 🥳🥳🥳

Thank you so much for the patient and for the help. Super appreciated

[kraenhansen]

Likewise - I'm really happy you're trying this out.
It's super important for us to get these rough edges rounded and we can't do this without the help of our community.
So thank you too!

[kraenhansen]

I've created facebook/metro#808 in an attempt to rectify this.

[kraenhansen]

As mentioned in this comment, a simpler solution is to allow the React Native CLI to set their defaults by leaving out the spread of defaultResolver:

resolver: {
  sourceExts: [...defaultResolver.sourceExts, 'cjs'],
},

[IronTony]

Nice, thank you again.
I will try later.