Gatsby: Support for .jsx extensions

[jalik]

Summary

Like all my projects, I have installed the eslint-airbnb-config to check code quality and autoformat code (with IntelliJ IDEA Ultimate), I've run these commands in the root folder :

npm i -D eslint-config-airbnb eslint-plugin-jest
npx install-peerdeps --dev eslint-config-airbnb

Then I added my .eslintrc file :

{
  "extends": "airbnb"
}

But after that I had errors like JSX not allowed in files with extension ' .js' (react/jsx-filename-extension), so I tried to rename files, but .jsx extension not being recognized by default in the current Webpack config of Gatsby...

Basic example

After digging here and there, I found how to add support for .jsx extension, and would like it to be supported by default in Gatsby, because it should be the case since .jsx is representing files containing JSX code, the following setup allows to use either .js or .jsx.

I've added a .babelrc with this content to support React and ES6 syntax :

{
  "presets": [
    "babel-preset-gatsby"
  ]
}

Of course I've installed the preset package:

npm i -D babel-preset-gatsby

Then in the file gatsby-node.js, I've added this:

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.jsx$/,
          loader: 'babel-loader',
        },
      ],
    },
    resolve: {
      extensions: ['.jsx'],
    },
  });
};

I did not have to mention .js to keep supporting .js extension, which is good.

Motivation

I am not using prettier, which is AFAIK relatively commonly used by Visual Studio Code users (which I am not neither).

Instead I format and check code using ESLint.
It would be awesome to have .jsx extension supported by default, so when adding an ESLint config like the AirBnB's one, we would only need to do the steps in the summary, and not the steps in the Basic example.

[m-allanson]

@jalik I think Gatsby should support .jsx already? Can you share a minimal reproduction that demos jsx files not working? Along with the results of running gatsby info.

Thanks!

[jalik]

okay... indeed I am unable to reproduce the problem I had, even doing the exact same steps than before, which were :

• run gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
• rename index.js to index.jsx or include a component file which has the extension .jsx
• run gatsby develop
• check for errors in the console or in the page at http://localhost:8000/

I would says it was something wrong with the setup, I cannot explain, but I was using another computer at the moment (which died the same day...).

Thank you for the assistance and sorry for the time wasted.

Note: Gatsby is what I was looking for several years (matching http requests with files), it is a pleasure to work with. Thanks a lot!

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[olegKusov]

I have same issue

[olegKusov]

Try to delete .cache folder and public folder and build it again

[kkshmz]

Hi, this just doesn't work for the index page.
Is there some reason for this or am I debugging the situation wrong?

[blopa]

I can only make it work with "index.jsx" but not "Index.jsx". It would be awesome if a support for Index.jsx would be added (capital-case "Index").