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?
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,
},
},
Or subjectively more readable /\.(js|jsx)$/