Compile .jsx files instead of .js using babel

Question

I'm starting to learn ReactJs, and I was trying to build an environment from scratch using this "builder".

Everything works pretty well, but I'd like to work with .jsx files instead of .js (the text editor screws up otherwise, and ir feels better using a different extension for not-compiled scripts)

However, I didn't manage to compile such .jsx files, it only works with .js files.

This is the configuration files for .babelrc:

{
    "presets":["es2015","react"]
}

And my webpack.config.js:

var path = require('path');

var config = {
    context: path.join(__dirname,'src'),
    entry:[
        './main.js'
    ],
    output:{
        path    :path.join(__dirname,'www'),
        filename:'bundle.js'
    },
    module:{
        loaders:[
            {
                test: /\.js$/,
                exclude:/node_modules/,
                loaders:['babel']
            }
        ],
    },
    resolveLoader:{
        root: [
            path.join(__dirname,'node_modules')
        ]
    },
    resolve:{
        root:[
            path.join(__dirname,'node_modules')
        ]
    }
};

module.exports = config;

I tried simply changing the extensions in the webpack config file from js to jsx, but to no avail. Any ideas?

Answer 1

Just replace this line:

test: /\.js$/,

with:

test: /\.jsx$/,

It will run babel loader on the .jsx files, instead of .js files.

If you want to transpile both .js and .jsx, you can set it to /\.jsx?$/, where ? in regex indicates to match 0 or 1 occurrences of the preceding character: test positive for both .js and .jsx.

.test property indicates a condition that must be met to run the loader specified in the loader key. You can read more about module.loader options here.

Also, when importing modules, you should add the .jsx extension, like this:

import Counter from './Counter.jsx';

Or set webpack's resolve.extensions config to add .jsx extension (by default, it looks only for .js files). Like this:

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

This way, you can import your files without the extension:

import Counter from './Counter';