React - 模块解析失败：意外的令牌。 您可能需要适当的加载程序来处理此文件类型

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.