28

React Native app fails to resolve components.

I am trying to import & render Test.jsx inside of App.js.

I get the following error-

error: bundling failed: Error: Unable to resolve module `./screens/Test` from App.js`:
The module `./screens/Test` could not be found from App.js. Indeed, none of these files exist

Project Manager(or rather files) look like this-

Files

Code of Test.js-

import React, { Component } from 'react';
import {View, Text, StyleSheet} from 'react-native'

export default class Test extends Component {
    render() {
      return (
        <View style={styles.container}>
          <Text>Hello World?</Text>
        </View>
      );
    }
  }


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

Code of App.js-

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Test from "./screens/Test";

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Test />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

I've literally tried every solution mentioned - react-native#4968 and none of them seem to work. I've also referred to this, but, the solution is for css and nowhere close to what would fix this issue.

I've looked at lot more issues and SO's with no clue what else I have to do. I've also created a new project(screenshot and code is from the new project).

What am I missing?

UPDATE: I realised that the issue was because I have .jsx extension. Imports are working fine for .js file. Any pointers on how to enable the project to accept .jsx for imports?

2

5 Answers 5

47

update: for RN >0.59 as @RedGaint pointed in https://stackoverflow.com/a/55134051/8034782 you need to configure metro.config.js in the root level.

  module.exports = {
  resolver: {
    /* resolver options */
   sourceExts: ['jsx','js'] //add here 
  },
  transformer: {
    /* transformer options */
  },
  serializer: {
    /* serializer options */
  },
  server: {
    /* server options */
  }

  /* general options */
};

For RN < 0.57: Inside of the root of your project add a file named rn-cli.config.js and place the following code into it.

// ./rn-cli.config.js
module.exports = {
  /// @description Allows you to enable support for JSX files
  /// The `index.js` file in the root of your project has to be `.js`. 
  getSourceExts: () => [ 'jsx', 'js' ],
}

For RN > 0.57:

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

for more reference look into this there is already an issue opened:

https://github.com/facebook/react-native/pull/5233#issuecomment-382083236

4
  • 2
    @aravind_reddy I just tried it, it does not work even after having cleaned up everything and even trying on a fresh new project. It complains to be unable to find the file (and listing a bunch of file extensions it tried, not including those I put in getSourceExts). I tried to make a syntax error in this file and the getSourceExts function, which prove me it was indeed called, but nonetheless not taken into account to resolve files.
    – Sylver
    Oct 7, 2018 at 13:14
  • can you explain what is the exact problem ? Oct 18, 2018 at 13:30
  • @aravind_reddy I also added it in metro.config.js still no luck. Jan 22, 2021 at 9:43
  • Just realized adding resolver object in metro.config.js gives me an error that it can't resolve imports in App.js Jan 22, 2021 at 9:45
26

I am using react-native 0.59 and metro-react-native-babel-preset": "^0.53.0",.

The ./rn-cli.config.js file no longer works in the IOS release build. RN 0.59 requires a config file called metro.config.js in the root level. I have to use it to enable JSX support instead of rn-cli.config.js. Check out the documentation for the config file: https://facebook.github.io/metro/docs/en/configuration.html

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

module.exports = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: false,
            },
        }),
    },
    resolver: {
        sourceExts: ['jsx','js', 'json', 'ts', 'tsx']
    }
};
6

It seems that the config schema was changed in 0.57 version: #248

Try this:

// ./rn-cli.config.js
module.exports = {
  resolver: {
    sourceExts: ['jsx', 'js'],
  },
};
0
5

If someone doesn't want to load the default config and spread it, then they can simply use this

In metro.config.js

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    sourceExts: [
      'js', // note this has to be defined first or you get an error
      'json',
      'jsx',
      'mjs',
      // required because the react-native cli ignores `resolverMainFields`
      'ts',
      'tsx',
    ],
  },
};
4

This works in ReactNative v0.63

// metro.config.js
const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
  const { resolver: { sourceExts } } = await getDefaultConfig();
  return { resolver: { sourceExts: [...sourceExts, 'jsx'] } };
})();

Note: This approach will not overwrite existing settings.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.