ReactJS Module build failed: SyntaxError: Unexpected token - ReactDOM.render

Question

为什么会出现以下错误？我的声明 ReactDOM.render(<App />, container); 是 100% 合法代码。

我的 github 回购：https://github.com/leongaban/react_starwars

app.js 文件

import react from 'react'
import ReactDom from 'react-dom'
import App from 'components/App'

require('index.html');

// Create app
const container = document.getElementById('app-container');

// Render app
ReactDOM.render(<App />, container);

components/App 文件

import React from 'react'

const App = () =>
  <div className='container'>
    <div className='row'>

    </div>
    <div className='row'>

    </div>
  </div>;

export default App;

我的webpack.config

const webpack = require('webpack');
const path = require('path');

module.exports = {
entry: [
  './src/app.js'
],
output: {
  path: path.resolve(__dirname, './build'),
  filename: 'app.bundle.js',
},
module: {
  loaders: [
    {
      test: /\.html$/,
      loader: 'file-loader?name=[name].[ext]',
    },
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    },
  ],
},
plugins: [
  new webpack.NamedModulesPlugin(),
]
};

Answer 1

尝试将 resolve 属性添加到您的 webpack 配置文件中：

    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ["babel-loader"]
            }
        ]
    }

Answer 2

将其用作您的 webpack 配置文件

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: [
        './src/app.js'
    ],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.html$/,
                loader: 'file-loader?name=[name].[ext]',
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        },
    ],
},
plugins: [
    new webpack.NamedModulesPlugin(),
]
};

您缺少预设

Answer 3

为 jsx 语法安装 babel-preset-react。

npm install babel-preset-react

预设

loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        }
    ]

Answer 4

我遇到了同样的错误，我只需要将一个 .babelrc 文件添加到项目的路径（与 package.json 相同的位置），其中包含以下内容：

{
    "presets": [
        "env", 
        "react"
    ],
    "plugins": [
        "transform-class-properties"
    ]
}

Answer 5

如果有人在使用 CRA 并遇到此错误。解决方案就在这里。

转到 package.json 并添加 babel 配置。如果我看起来不那么慷慨，下面是代码

 "babel": {
        "presets": [
            "react-app"
        ]
 }

保持 CRA 设置的其余部分不变。实际上，CRA 使用它自己的自定义预设 react-app，这就是 webpack.config.js 文件中的设置。因此不需要其他预设。

Answer 6

或者您可以将预设放入项目根目录下的 .babelrc 文件中。当然需要先安装

像这样 /path/to/your/project/.babelrc

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

Answer 7

我遇到了这个问题，上面的 none 个答案对我有帮助。

我有一个符号化的 linked 文件夹——我的代码在 D:/Code 上，但我是通过符号化的 link 从 C:/Code 中运行ning。 =10=]

其中一个 js 包正在识别 link 并试图在 D 中运行但失败了。

我不得不从 D: 打开代码，而不是从符号 link 路径，问题就消失了。

Answer 8

在根目录下添加.babelrc，确保是'presets' no 'preset'

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

这是我的webpack.config.js供参考：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                options: { presets: ["@babel/env"]}
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    resolve: { extensions: ['*', '.js', '.jsx']},
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, 'public/'),
        port: 3000,
        publicPath: 'http://localhost:3000/dist/',
        hotOnly: true
    },
    plugins: [new webpack.HotModuleReplacementPlugin()]
}

Babel-loader v8 需要@babel v7 才能工作 package.json

  "devDependencies": {
    "@babel/cli": "^7.10.4",
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0"}

ReactJS Module build failed: SyntaxError: Unexpected token - ReactDOM.render

ReactJS Module build failed: SyntaxError: Unexpected token - ReactDOM.render

javascript

reactjs

react-dom