"Module not found: Error: Can't resolve..." error when using custom babel configFile

[rickh3nry]

When attempting to use a custom configFile to build our module we are seeing the following error when the module is used:

Module not found: Error: Can't resolve './MyModule' in '/path/to/lib/module'
Did you mean 'MyModule.js'?
BREAKING CHANGE: The request './MyModule' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

babel.config.js:

module.exports = (api) => {
  const isTest = api.env('test')
  return {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            browsers: [
              '> 1%',
              'chrome 109',
              'edge 124',
              'firefox 127',
              'safari 17.4',
              'not dead',
              'not ie <= 11',
              'not op_mini all',
              'not android <= 4.4',
              'not samsung <= 4',
            ],
            node: '18',
          },
          useBuiltIns: false,
          modules: isTest ? 'auto' : false,
        },
      ],
      '@babel/preset-typescript',
    ],
    plugins: ['babel-plugin-transform-typescript-metadata', ['@babel/plugin-proposal-decorators', { version: 'legacy' }]],
  }
}

package.json:

  "react-native-builder-bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      [
        "commonjs",
        {
          "configFile": true
        }
      ],
      [
        "module",
        {
          "configFile": true
        }
      ],
      [
        "typescript",
        {
          "configFile": true,
          "project": "tsconfig.build.json"
        }
      ]
    ]
  }

When the module is built there is a package.json generated with `{"type": "module"} which looks like when removed resolves the issue but this is needed as part of the bob build and can't be removed.

Any help would be appreciated!

[satya164]

When the module is built there is a package.json generated with `{"type": "module"}

This seems to be a bug. This file shouldn't be generated if esm is not enabled. I made a fix here and published a new version. Please upgrade and let me know if it fixes your issue.

Also, it's recommended to extend the default config (react-native-builder-bob/babel-preset) when using a custom babel configuration (though not necessary in this case) https://callstack.github.io/react-native-builder-bob/build#configfile

While it wouldn't be necessary for your setup specifically since you don't have esm enabled, it's still recommended to use resolve.fullySpecified: false for projects that may use React Native libraries https://callstack.github.io/react-native-builder-bob/esm#guidelines - otherwise it's not possible to use platform specific extensions such as .ios.js, .android.js etc. for other libraries with ESM syntax.

[rickh3nry]

Thank you! This worked for us 👍