Question

我正在尝试关注this video，但遇到此错误：

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

我关注了视频中的所有内容，但看不到哪里出了错。

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

必须先使用Babel编译JSX语法，然后才能将其加载到浏览器中。

为此，您可以将一个.babelrc文件添加到项目的根目录：

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

Babel Preset React

Django + Babel + Webpack意外令牌

1 个答案: