Неожиданная ошибка токена, определяющая данные в JSX React - PullRequest
Новая
       11

Неожиданная ошибка токена, определяющая данные в JSX React

0 голосов
/ 02 мая 2019

Я пытаюсь использовать React с D3 в приложении Electron с WebPack 4.

В настоящее время я просто пытаюсь получить тестовый пример сборки.Я полагаю, что у меня есть интеграция различных технологий - я могу рисовать основные жестко закодированные фигуры без проблем.

Тем не менее, несколько примеров определяют данные для передачи из сценария JSX приложения, но я получаю сообщение об ошибке при использованииобразец кода.Основываясь на изучении этой проблемы, я считаю, что она связана с компиляцией JSX.Я добавил поддержку «response» и «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 ... */
    }
}

Вот мой «веб-пакет».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,

Чего мне не хватает, или я смотрю по неверному пути?

Большое спасибо,

BW

1 Ответ

0 голосов
/ 02 мая 2019

Вам необходимо настроить файл .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
    };
  }
...