React - Module parse failed: Unexpected Token. You may need an appropriate loader to handle this file type

Question

My first time using react, so apologies if I'm doing something obvious and incredibly wrong. That said, I've read up on several similar-seeming bugs on here and on github and I can't find anything that works for mine. Here's the full error message:

ERROR in ./src/frontend/src/components/App.js 6:15
Module parse failed: Unexpected token (6:15)
You may need an appropriate loader to handle this file type.
| class App extends Component{
|     render() {
>         return <h1>React App</h1>
|     }
| }
 @ ./src/frontend/src/index.js 1:0-35

The full code from which that error message was drawn:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component{
    render() {
        return <h1>React App</h1>
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

I feel like something is wrong with my webpack-config.js, but I copied that directly from a tutorial I was using so I'm not sure why it would be wrong. Here it is, for reference:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

And here are my package dependencies from package.json:

"dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },

And finally my .babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react"],
    "plugins": ["transform-class-properties".js]
}

I really have no idea what's going on, so any help would be much appreciated. Please let me know if I left out any relevant info that could be helpful. Thank you.

Answer 1

The error comes from this line: return <h1>React App</h1>, because <h1>...</h1> is not valid javascript. Even if rename this is would be parsed as vanilla js and not jsx, because of your webpack-config.js, so there are multiple things you should do to fix it:

1. Rename App.js to App.jsx,
2. Update test: /\.js$/, to test: /\.(js|jsx)$/, in webpack-config.js
3. I think there is also an error in your .babelrc: you don't want that .js there, after "transform-class-properties".
4. Rename webpack-config.js to webpack.config.js

Here is a tutorial that shows this: https://www.valentinog.com/blog/babel/. Also, you could use https://github.com/facebook/create-react-app that simplifies all of this and provides a great starting config.