webpack is not recognizing .jsx file extension

Question

In our project, I'm trying to refactor all our components to have a .jsxfile extension rather than .js. My webpack.config.babel file now looks like this:

import fs from "fs"

const babelrc = JSON.parse(fs.readFileSync("./.babelrc"))

export default {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        query: babelrc,
        exclude: /(node_modules|bower_components)/,
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader",
        query: babelrc,
        exclude: /(node_modules|bower_components)/,
      },
      {
        test: /\.json$/,
        loader: "json-loader",
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
    ],
  },
}

However when I try to run import Main from './components/Main/Main'; in my client.js file, it shows me

Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js'
 @ multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js

I'm new to babel and webpack. What other places to I need to register the jsx file extension?

Answer 1

Take a look at the documentation for resolve.extensions: https://webpack.js.org/configuration/resolve/#resolveextensions

You can add the following to your Webpack config to also automatically resolve files with the .jsx extension by adding the following to your config:

resolve: {
  extensions: ['.js', '.jsx']
}

_{Btw, you can also optimize your loader config by removing the separate .jsx loader and make the first loader test for /\.jsx?$/}