reactjsreduxjsxboilerplate

How can i use jsx instead of js extension in react boilerplate?


I just want to add jsx Page in the https://github.com/react-boilerplate/react-boilerplate/

Below is what i want to add Password forgot page jsx file content.

import React from 'react';
import { connect } from 'react-redux';
import {Link, Route} from 'react-router-dom';

class PwdForgotPage extends React.Component {
  render() {
    return (
      <div className="col-md-6 col-md-offset-3">
        Password forgot.
        <button className="btn btn-link">Back</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  const { registering } = state.registration;
  return {
    registering,
  };
}

const connectedPwdForgotPage = connect(mapStateToProps)(PwdForgotPage);
export { connectedPwdForgotPage as PwdForgotPage };

But if i use jsx extension, failed to run as below.

Module parse failed: C:\.....\frontend\app\containers\PwdForgotPage\PwdForgotPage.jsx Unexpected token (8:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div className="col-md-6 col-md-offset-3">
|         Password forgot.
|         <button className="btn btn-link">Back</button>

If i use js extension, it works. How do i change the config in the boilerplate for jsx extension support?


Solution

  • You need to add jsx extension to the rule in webpack config that enables babel babel-loader.

    {
        test: /\.jsx?$/, // notice optional x?
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: options.babelQuery,
        },
      },
    

    https://github.com/react-boilerplate/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js#L23

    Or subjectively more readable /\.(js|jsx)$/