webpack fails to compile JSX - angularjs

Question

This is the error message that I get (I removed part of the file path for security reasons):
ERROR in ./react-components/MyComponent.js
Module parse failed: /home/vagrant/src/***/react-
components/MyComponent.js Unexpected token (6:6)
You may need an appropriate loader to handle this file type.
| render() {
| return (
| <div>
| <p>FooBar: {this.props.fooBar}</p>
| <p>Baz: {this.props.baz}</p>
# ./client/app/app.module.js 52:19-64
# ./client/app/index.js
Right now, all I'm trying to do is to just allow a React component to live inside an Angular 1.X project. This is what the webpack config looks like:
webpack.make.js:
config.module = {
rules: [{
// JS LOADER
// Reference: https://github.com/babel/babel-loader
// Transpile .js files using babel-loader
// Compiles ES6 and ES7 into ES5 code
test: /\.js$/,
use: [{
loader : 'babel-loader',
options : {
shouldPrintComment(commentContents) {
// keep `/*#ngInject*/`
return /#ngInject/.test(commentContents);
},
plugins : TEST ?
[[ 'istanbul', { 'exclude' : [ '**/*.spec.js'] }]]
: [],
presets : ['es2015', 'react', 'stage-0']
}
}],
include: [
path.resolve(__dirname, 'client/')
]
},{
// ASSET LOADER
// Reference: https://github.com/webpack/file-loader
// Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
// Rename the file using the asset hash
// Pass along the updated reference to your code
// You can add here any file extension you want to get copied to your output
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)([\?]?.*)$/,
loader: 'file-loader'
}, {
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'raw-loader'
}, {
// CSS LOADER
// Reference: https://github.com/webpack/css-loader
// Allow loading css through js
//
// Reference: https://github.com/postcss/postcss-loader
// Postprocess your css with PostCSS plugins
test: /\.css$/,
loader: !TEST
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Extract css files in production builds
//
// Reference: https://github.com/webpack/style-loader
// Use style-loader in development for hot-loading
? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
// PostCSS
// Reference: https://github.com/postcss/autoprefixer-core
// Add vendor prefixes to your css
loader: 'postcss-loader',
options : {
plugins : [
autoprefixer({browsers: ['last 2 version']})
]
}
}
]
})
// Reference: https://github.com/webpack/null-loader
// Skip loading css in test mode
: 'null-loader'
}, {
// SASS LOADER
// Reference: https://github.com/jtangelder/sass-loader
test: /\.(scss|sass)$/,
loader : ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
// PostCSS
// Reference: https://github.com/postcss/autoprefixer-core
// Add vendor prefixes to your css
loader: 'postcss-loader',
options : {
plugins : [
autoprefixer({browsers: ['last 2 version']})
]
}
},
{
loader : 'sass-loader',
options: {
outputStyle: 'compressed',
precision: 10,
sourceComments: false
}
}
]
}),
include: [
path.resolve(__dirname, 'client/app/app.scss')
]
}, {
// Imports Loader
// This allows the CodeMirror json linter to find jsonlint, which it expects to be global
test: require.resolve('codemirror/addon/lint/json-lint'),
use: 'imports-loader?jsonlint=jsonlint-mod'
}
]
};
And here is my .babelrc:
{
"presets": ["es2015", "react", "stage-3", "stage-0"]
}
I've tried both stage-3 and stage-0, but I still get the same error. I made sure to install babel-preset-react via npm. There's nothing wrong with the JSX in the JS file, as it's a simple React component that's used as example code from a repository that I'm using. I've gotten to a point where I'm not sure where to look next.

Answer 1

I forgot to add path.resolve(__dirname, 'react-components') in the includes object, where the JS file in question resides.