Javascript ReactJS 模块构建失败：SyntaxError: Unexpected token - ReactDOM.render

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

提问by Leon Gaban

Why am I getting this error below? My statement ReactDOM.render(<App />, container);is 100% legit code.

为什么我在下面收到此错误？我的声明ReactDOM.render(<App />, container);是 100% 合法的代码。

My github repo: https://github.com/leongaban/react_starwars

我的 github 仓库：https: //github.com/leongaban/react_starwars

The app.js file

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);

The components/App file

组件/应用程序文件

import React from 'react'

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

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

    </div>
  </div>;

export default App; 

My webpack.config

我的 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(),
]
};

采纳答案by Julien

Use this as your webpack config file

使用它作为你的 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(),
]
};

You are missing the presets

您缺少预设

回答by Andy Smith

I was getting the same error, and I simply needed to add a .babelrc file to the route of the project (same location as package.json) containing the following:

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

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

回答by Sridhar

Install babel-preset-react for jsx syntax.

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

npm install babel-preset-react

presets

预设

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

回答by Yury Lavrukhin

Or you can put your presets in .babelrc file in the root of your project. Of course you need to install it first.

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

Like this /path/to/your/project/.babelrc

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

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

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

回答by Daniel Pérez

Try adding the resolveproperty to your webpack config file:

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

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

回答by dWitty

I had this issue and none of the above answers helped.

我遇到了这个问题，上述答案都没有帮助。

I had a symbolically linked folder-- my code was on D:/Code but I was running from C:/Code via the symbolic link.

我有一个符号链接的文件夹——我的代码在 D:/Code 上，但我通过符号链接从 C:/Code 运行。

One of the js packages was recognizing the link and attempting to run within D and failing.

其中一个 js 包正在识别链接并尝试在 D 中运行并失败。

I had to open the code from D: and not from the symbolic link path, and the problem went away.

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

回答by kushalvm

If someone is working with CRA and get this error. Here the solution goes.

如果有人与 CRA 合作并收到此错误。解决方案在这里。

Goto package.jsonand add babelconfig. If I'm not seeming so generous, below is the code

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

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

Keep rest of CRA setup as it is. Actually CRA uses it's own custom preset react-appand that's what is setup in webpack.config.jsfile. Hence no need for other presets.

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