Metro: getSourceExts not being respected when bundling

[dlferro]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
Metro appears to be not respecting the configuration defined in rn-cli.config.js

module.exports = {
  getSourceExts: () => {
    return ['jsx', 'mjs', 'js'];
  }
};

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.
Include the above rn-cli.config.js in a RN 0.57.0 project and attempt to leverage a JSX file for your App component.

What is the expected behavior?
JSX file extensions should be in the appropriate search paths.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

• Metro v0.45.2
• RN 0.57.0
• Yarn 1.9.4
• OSX

[ajcrites]

I believe getSourceExts has changed. See https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#updating-to-this-version which links to https://facebook.github.io/metro/docs/en/configuration

Instead, try:

module.exports = {
  resolver: {
    sourceExts: ['jsx', 'mjs', 'js'],
  }
};

[dlferro]

I attempted to do that, however that presents the following when attempting to run the bundler:

error: bundling failed: Error: Unable to resolve module `react-native` from `../index.js`: Module `react-native` does not exist in the Haste module map or in these directories:
  ../node_modules

This might be related to https://github.com/facebook/react-native/issues/4968
...

I've attempted to multiple clear cache methods, but nothing appears to resolve this. Moving back to naming everything with the .js extension allows it to bundle appropriately.

[dlferro]

It appears that the config for sourceExts does not merge with the defaults specified in the Metro source.

module.exports = {
  resolver: {
    sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx']
  }
};

This ended up working for me.

[drorbiran]

Doesn't seems to be working on React Native 59

[deepankarsandy]

Solved

I'm on RN 60.4

rn-cli.config.js

module.exports = { resolver: { sourceExts: ['js', 'json', 'ts', 'tsx', 'jsx'] } };

metro.config.js

module.exports = { transformer: { ... }, resolver: { sourceExts: ['jsx', 'js', 'ts', 'tsx', 'json'], } };

Please clean your build folder and build again to make it work