Question

我是新手做出反应。我遇到了一个错误的错误，这让我感到困惑！据我所知，index.jsx中的语法没有错，如下所示。

>  7 |          <div>
     |          ^

我的index.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'))

我的package.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 文件并通过输入以下内容进行设置：< / p>

 {  "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']
}

为什么没有采取这个措施？有什么建议吗？

模块构建失败：SyntaxError：意外的令牌

2 个答案: