Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`.jsx` extension cannot be used with React Native #982

Closed
jgkim opened this issue Aug 2, 2016 · 20 comments
Closed

`.jsx` extension cannot be used with React Native #982

jgkim opened this issue Aug 2, 2016 · 20 comments

Comments

@jgkim
Copy link

@jgkim jgkim commented Aug 2, 2016

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
Copy link

@ryankask ryankask commented Aug 2, 2016

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
Copy link
Collaborator

@ljharb ljharb commented Aug 2, 2016

A note would be great, thanks!

@borisyankov
Copy link

@borisyankov borisyankov commented Aug 2, 2016

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
Copy link
Collaborator

@ljharb ljharb commented Aug 2, 2016

@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
Copy link

@vzhen vzhen commented Oct 12, 2016

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

@ljharb
Copy link
Collaborator

@ljharb ljharb commented Oct 12, 2016

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

@julesmoretti
Copy link

@julesmoretti julesmoretti commented Dec 6, 2016

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

@ljharb
Copy link
Collaborator

@ljharb ljharb commented Dec 7, 2016

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

@sotayamashita
Copy link
Contributor

@sotayamashita sotayamashita commented Dec 21, 2016

@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
Copy link

@yordis yordis commented Jan 31, 2018

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
Copy link

@tjbenton tjbenton commented Apr 17, 2018

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
Copy link

@laukaichung laukaichung commented Oct 18, 2018

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

@youngjuning
Copy link

@youngjuning youngjuning commented Oct 20, 2018

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

@Under-Warz
Copy link

@Under-Warz Under-Warz commented Oct 22, 2018

@stonecold123 @youngjuning try this :

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

@youngjuning youngjuning commented Oct 23, 2018

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

@taranda
Copy link

@taranda taranda commented Mar 14, 2019

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

@taranda
Copy link

@taranda taranda commented Mar 14, 2019

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

@sdaconceicao
Copy link

@sdaconceicao sdaconceicao commented Mar 24, 2019

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
Copy link

@cvharris cvharris commented Apr 3, 2019

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

@ljharb
Copy link
Collaborator

@ljharb ljharb commented Apr 3, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.