Question

这是我收到的错误：

ERROR in ./src/components/CustomHeader.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (17:10)

  15 | class CustomHeader extends Component {
  16 | 
> 17 |     state = {activeItem: 'home'};
     |           ^
  18 | 
  19 |     handleItemClick = (e, {name}) => this.setState({activeItem:name});
  20 |

她是我的webpack.config.js文件：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: "cheap-eval-source-map",
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js",
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.css$/,
                loader: [ 'style-loader', 'css-loader' ],
                include: path.join(__dirname, 'src'),
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: 'style-loader',
                }, {
                    loader: 'css-loader',
                }, {
                    loader: 'sass-loader',
                }],
            }

        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        inline: true,
        hot: true,
        historyApiFallback: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),
            hash: true,
        })
    ]
}

.babelrc文件：

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

我需要更改状态设置吗？还是我需要导入其他项目？任何帮助，将不胜感激。谢谢。

（注意：目前，我正在使用的代码直接来自Semantic UI Examples。）

Answer 1

您需要stage-2 preset

OR

您可以使用babel-plugin-transform-class-properties。
如果您不想使用stage-2并坚持使用更稳定的阶段。

在BabelJS上尝试组合，然后选择毒药。

在React中设置状态时出现SyntaxError

1 个答案: