在 JSX React 中定义数据的意外令牌错误

Question

我正在尝试在 Electron 应用程序中使用 React 和 D3，以及 WebPack 4。

目前，我正在尝试构建一个测试示例。我相信我已经完成了不同技术的集成 - 我能够毫无问题地绘制基本的硬编码形状。

但是，有几个示例定义了从应用程序 JSX 脚本传递的数据，但我在使用示例代码时收到错误消息。基于对此处问题的研究，我认为与 JSX 的编译有关。我已经添加了对 'react' 和 'es2016' 的支持，但我无法解决它。

这里是有问题的代码：

export default class App extends Component {

    state = {
        data: [12, 5, 6, 6, 9, 10],
        width: 700,
        height: 500,
        id: root
    }

    render() {
       /* ... not listed for brevity ... */
    }
}

这是我的 'webpack.config.js':

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {

    watch: true,

    target: 'electron-renderer',

    entry: './app/src/renderer_process.js',

    output: {
        path: __dirname + '/app/build',
        publicPath: 'build/',
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                options: {
                    presets: ['react', 'es2016']
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                  loader: 'css-loader',
                  options: {
                    modules: true
                  }
                })
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin({
            filename: 'bundle.css',
            disable: false,
            allChunks: true
        })
    ],

    resolve: {
      extensions: ['.js', '.json', '.jsx']
    }

}

这是我收到的错误：

ERROR in ./app/src/App.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:/Projects/MyTestApp/app/src/App.jsx: Unexpected token (21:10)

  19 | export default class App extends Component {
  20 |
> 21 |     state = {
     |           ^
  22 |         data: [12, 5, 6, 6, 9, 10],
  23 |         width: 700,
  24 |         height: 500,

我错过了什么，还是我看错了路？

非常感谢，

体重

Answer 1

您需要配置 .babelrc 文件才能使用此语法。

试试这个：

{
  "presets": [
    ["es2016"],
    "react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties"
  ]
}

并从您的 wabpack 中删除这一行

 options: {
            presets: ['react', 'es2016']
          }

或者如果你不想安装 babel 插件，只需将它放在构造函数中

constructor() {
    super();
    this.state = {
        data: [12, 5, 6, 6, 9, 10],
        width: 700,
        height: 500,
        id: root
    };
  }

在 JSX React 中定义数据的意外令牌错误

Unexpected Token Error Defining Data in JSX React

jsx

reactjs

webpack-4