Javascript: `.jsx` extension cannot be used with React Native

[jgkim]

Since .jsx extension cannot be used with React Native (Cf. facebook/react-native#5233), if someone wants to use this config with React Native, the rule react/jsx-filename-extension should be set to .js only instead of .jsx only.

[ryankask]

I've disabled this rule because as you said, it doesn't make sense in the context of an RN app.

It might help to add a note in the docs: https://github.com/airbnb/javascript/tree/master/react#naming

[ljharb]

A note would be great, thanks!

[borisyankov]

Apart from React Native, it is very common to use .js extensions for files that include JSX.
Having this as a default doesn't make sense.

[ljharb]

@borisyankov "what's common" isn't the primary motivator for this guide, it's "what we use at Airbnb". We believe that .js files should only ever contain actual, standard JavaScript, and JSX is decidedly not that.

[vzhen]

So how?
Anywhere to disable react native .js jsx error?

[ljharb]

"react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]

[julesmoretti]

@ljharb - Thank you for this, but where should this be inputed? thank you

[ljharb]

@julesmoretti in your .eslintrc file, in the "rules" section. http://eslint.org has all the documentation for eslint.

[sotayamashita]

@julesmoretti

{
    "extends": "airbnb",

+    "rules": {
+      // `.jsx` extension cannot be used with React Native
+      // https://github.com/airbnb/javascript/issues/982
+      "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }]
+    }
}

[yordis]

Everyone that is giving 👎 to @ljharb you clearly do not understand that this is a React Native issue.

As he explains, this is the guideline for AirBnB, not the guide line of Javascript community or React ecosystem and they have a really good argument on why this should be like this,

Just let me give you one,

Go to your code and tell me how many files depends of React components right now 😉 I am pretty much that with .jsx it wouldn't take you that long.

Why would you care,

Well, go to your code and tell me what could be a potential code that could be shared cross any Javascript environment (NodeJS and Browsers) I am pretty much that it is not the React one, it isn't it?!

I hope you get where I am heading.

Despite that, React creator invented .jsx extension and was only used when you used JSX syntax.
It is a bit hypocritical that Metro bundler (used on React Native) do not include the extension by default and use the argument of .jsx is not a real extension or whichever one they could come out with, they invented the extension.

So, I do not see any issue related to the code style unless AirBnB decide to think otherwise.

[tjbenton]

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.

// ./rn-cli.config.js
module.exports = {
  /// @name Make ReactNative Great Again
  /// @description Allows you to enable support for JSX files, and `.mjs` files which is the new node standard
  /// @source http://www.fallingcanbedeadly.com/posts/enabling-react-native-jsx-extension
  /// @note One caveat, The `index.js` file in the root of your project has to be `.js`. 
  getSourceExts: () => [ 'jsx', 'mjs', 'js' ],
}

facebook/react-native#5233

[laukaichung]

@tjbenton
Your solution doesn't work in 0.57.3. Any help?

[youngjuning]

@tjbenton your solution doesn't work in 0.57.3. Any help?

[Under-Warz]

@stonecold123 @youngjuning try this :

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

[youngjuning]

Thanks for your help.Chinese will remember you. @Under-Warz

[taranda]

@Under-Warz's solution no longer works in React Native 0.59. Anyone have a solution?

[taranda]

Found an answer to React Native 0.59. Move resolver: {...} and other configs from rn-cli.config.js to metro.config.js.

[sdaconceicao]

Found an answer to React Native 0.59. Move resolver: {...} and other configs from rn-cli.config.js to metro.config.js.

You saved me several hours of pulling my hair out from trying to figure out why the old solutions were not working, thanks!

[cvharris]

@taranda's comment is very important for anyone upgrading to 0.59. Thank you for catching that!

[ljharb]

This seems answered (and seems more worthy of an issue on RN itself).