Django + Babel + Webpack неожиданный токен

Question

Я пытаюсь подписаться на это видео , но я сталкиваюсь с этой ошибкой:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (5:4)

Я следил за всем в видео, но я не вижу, где я 'm идет не так.

Webpack.config.js:

const path = require('path')

module.exports = {
    entry: {
        app: './src/index.js'
    },
    watch: true,
    devtool: 'source-map',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: [
            '.js'
        ]

    }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>
        <h1>Test</h1>
    </div>,
    document.getElementById("root")
)

Answer 1

Синтаксис JSX должен быть скомпилирован с Babel, прежде чем вы сможете загрузить его в браузер.

Для этого вы можете добавить файл .babelrc в корневой каталог проекта:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Предварительная настройка Babel