How to allow react-native to enable support for JSX (extension) files

react-native-file extension
jsx to js
react const
jsx file
class in react native
react native learning
react native components examples
render react native

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-

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?

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

// ./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

Enabling .jsx files in React Native, One such choice is the refusal to support the .jsx extension out of the box. (​which is also required by React Native) has no problem handling JSX syntax in .​js files, but React Native allows customizing several parts of the packager pipeline,  Enable Emmet support for JSX in Visual Studio Code | React. There is a small tweak you need to do on your VS Code to enable Emmet support for JSX. This makes typing HTML in React ( .js ) files much faster and easier. Emmet comes with VS Code by default. Open any source folder on VS Code, and go to Settings :

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']
    }
};

`.jsx` extension cannot be used with React Native · Issue #982 , rn-cli.config.js module.exports = { /// @name Make ReactNative Great Again /// @​description Allows you to enable support for JSX files, and  It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”. We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.

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'],
  },
};

[Packager] Support for jsx filenames in React Native · Issue #2303 , [Packager] Support for jsx filenames in React Native #2303. Closed. pickhardt Enable JSX files extension expo/react-native#1. Closed. Enabling .jsx files in React Native. React Native is a really cool developing technology, but it forces some strange defaults on its users. One such choice is the refusal to support the .jsx extension out of the box . While Babel (which is also required by React Native) has no problem handling JSX syntax in .js files,

Introducing JSX – React, It is called JSX, and it is a syntax extension to JavaScript. in separate files, React separates concerns with loosely coupled units called “components” that contain both. yet comfortable putting markup in JS, this talk might convince you otherwise. It also allows React to show more useful error and warning messages. If this is going to be the case, could you get something added to the documentation that clarifies that filenames can't be .jsx. I just spent a couple hours trying to figure out why my module couldn't be found only to discover that React Native doesn't support the .jsx extension that is common for React projects.

Enable Emmet support for JSX in Visual Studio Code, JSX. This makes typing HTML in React ( .js ) files much faster and easier. There is a small tweak you need to do on your VS Code to enable Emmet support for JSX. On the left sidebar, go to Extensions dropdown, and choose Emmet. 4. Update: This only works in react-native 57, use the solutions below for later versions. Just so everyone one knows it is possible to use JSX files with react native. Inside of the root of your project add a file named rn-cli.config.js and place the following code into it.

create-react-component-folder, with one command. There is also support for Typescript, React Native, Less and Sass. "stories" is to enable story book component. "spec" to have the -j, --jsx Creates the component file with .jsx extension. -l, --less Adds  Additionally the output will have a .jsx file extension. The react mode will emit React.createElement, does not need to go through a JSX transformation before use, and the output will have a .js file extension. The react-native mode is the equivalent of preserve in that it keeps all JSX, but the output will instead have a .js file extension.

Comments
  • Are you using webpack to build the app? If so, show us your module loaders/rules
  • @bozzmob Maybe this can help: fallingcanbedeadly.com/posts/…
  • @FidanHakaj Thanks, it worked.
  • @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.
  • can you explain what is the exact problem ?