23

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.

paul45
  • 233
  • 1
  • 2
  • 5

2 Answers2

9

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.

Porcellus
  • 559
  • 2
  • 5
  • 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(, 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. – paul45 Sep 07 '20 at 03:03
  • Could you update the question with the new error? Is it literally the same error just pointing to a different line? – Porcellus Sep 07 '20 at 07:55
  • 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. – paul45 Sep 07 '20 at 19:50
  • 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? – Porcellus Sep 08 '20 at 08:09
1

Added this code in webpack.config.js to resolve jsx as js. Visit Can't resolve module (not found) in React.js

module.exports = {
    //...
    resolve: {
        extensions: ['.js', '.jsx']
    }
};
Ivan
  • 11
  • 2