模块生成失败:语法错误:意外令牌

Question

我是新手。我遇到了一个奇怪的错误，这让我感到困惑！据我了解，index.jsx 中的语法没有任何错误，如下所示。

>  7 |          <div>
|          ^

我的索引.js 是

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<p>Hi Russell!!</p>
</div>
);
}
}
ReactDOM.render( <App/>, document.getElementById('app'))

我的包.json 是

const webpack = require('webpack');
const path = require('path');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /.jsx?/,
include: APP_DIR,
loader: 'babel-loader'
}
]
}
}
module.exports = config;

我已经审查了其中的每一个可能部分。尽管如此，我还是无法弄清楚出了什么问题。它仍然给我抛出错误。关于如何调试它的任何帮助？

尝试运行时弹出错误

webpack -d

如果我开始

npm run serve

浏览器将打开，但不会在页面上呈现任何内容。这让我在

提前非常感谢。

Answer 1

我遇到了同样的问题，并通过在根文件夹中添加一个.babelrc文件来解决它。

安装 babel-preset-env和babel-preset-react后，我创建了.babelrc文件并通过键入以下内容进行设置：

{  "presets" : [ "env", "react" ] }

Answer 2

解决了这个问题，通过将以下内容添加到 webpack.config 中.js如下所示，

/*Previous Code*/
query: {
presets: ['es2015', 'react']
}
/*Remaining closure of brackets*/
module.exports = exports;

但是，我有一个问题，我在我的 .bablerc 中添加了这个，如下所示，

{
presets: ['es2015', 'react']
}

为什么没有采取？有什么建议吗？