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.

Solution

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.

Comments

[paul45]

Thanks so much. Following those steps fixed the error I posted about. But the same error is now being generated by the next line: ReactDOM.render(<App />, document.getElementById('app')); If you have any insight as to why this has happened, I would really appreciate it. Otherwise, thank you for your help.

[Porcellus]

Could you update the question with the new error? Is it literally the same error just pointing to a different line?

[paul45]

I found the error. I had named the webpack config file "webpack-config.js" but it was actually supposed to be "webpack.config.js" Really beyond stupid but at least it was an easy fix once I realized. Thanks for your help.

[Porcellus]

I'm glad it worked and added that to my answer to keep the info ordered. If everything worked could you accept it as the answer?