React/Wordpress Webpack Compile Issue


#1

Followed the tutorial from React/Wordpress but can’t get pass the second lesson. Even tried copying 2.1 directly (updated url) and throws error when compiling?

Module build failed: SyntaxError: Unexpected token (27:12)

  25 |     render() {
  26 |         return (
> 27 |             <div className="container">
     |             ^
  28 |                 <h1>Welcome to Headless WordPress!</h1>
  29 |             </div>

 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js

I did some research and it looks like there is a compiling JSX issue and needs to be configured in webpack

Help?


#2

I figured out my issue. I had to run my JS through the react-preset in my webpack.config

The webpack config provided via github and tutorial doesn’t seem to work.

Here’s what I had to do if anyone else runs into this issue.

   module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, 'src')
                ],
                exclude: /node_modules/,
                query:
				    {
				    	presets:['react']
				    }
            }
        ]
    },

I added the test to include JS and JSX then ran it through the react preset. Now course 2.1 loads for me.


#3

Another edit - I didn’t have the babel file included in my root. Make sure you can see hidden files and that the babel config is in there (.babelrc).