Реакция: Как решить непредвиденную ошибку токена (<)?

Question

Относящиеся к этому уроку: https://www.youtube.com/watch?v=GieYIzvdt2U Я получаю ошибку:

    ERROR in ./leadmanager/frontend/scr/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>
    |     }
    | }
     @ ./leadmanager/frontend/scr/index.js 1:0-35

когда я бегу npm run dev

Вы можете найти мой код на https://github.com/bewaresandman/django

Я почти уверен, что мой код точно совпадает с кодом из учебника, поэтому я нахожусь в конце.

Редактировать: файлы .babelrc и webpack.config.js находятся в неправильной папке. Я исправил это. Нет ошибки: ERROR in ./leadmanager/frontend/scr/components/App.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Users\meissners\eclipse-workspace\django\leadmanager\frontend\scr\components\App.js: Unexpected token (6:15) occours.

Answer 1

Вы должны использовать jsx файл.

Переименуйте свои index.js и App.js с index.jsx и App.jsx.

Answer 2

У вас должен быть файл webpack.config.js.

webpack.config.js должен содержать:

module.exports = {
module: {
    rules: [
        {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/env', "@babel/react"],
            }
          }}
    ]
}

}