Сборка модуля не удалась Laravel-mix - PullRequest
Новая
       1

Сборка модуля не удалась Laravel-mix

0 голосов
/ 01 октября 2018

Для школы мы должны сделать бэкэнд для интерфейса React.Поэтому мы решили использовать Laravel-mix для этого.Я скопировал компонент из проекта React в наш новый проект Laravel-mix.Но когда я пытаюсь выполнить рендеринг, я получаю следующую ошибку: Error

Но когда я смотрю на код, все кажется неправильным.Это немного кода компонентов: 

import React from 'react';
import _ from 'lodash';
import {WidthProvider, Responsive} from 'react-grid-layout';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import Clock from './Clock.jsx';
import Weather from './Weather.jsx';

const ResponsiveReactGridLayout = WidthProvider(Responsive);
const originalLayouts = getFromLS("layouts") || [];

/* This class generates the layout for the web app. It renders the grid
 * and it's items, but also button's and a dropdown menu, to control the grid.
 */

class Grid extends React.PureComponent {
    static defaultProps = {
    className: "layout",
    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
        rowHeight: 100,
        autoSize: true,
  };

  constructor(props) {
    super(props);

    this.state = {
            items: originalLayouts.map(function(i, key, list) {
                return {
                    i: originalLayouts[key].i,
                    x: originalLayouts[key].x,
                    y: originalLayouts[key].y,
                    w: originalLayouts[key].w,
                    h: originalLayouts[key].h,
                    widget: originalLayouts[key].widget,
                    minW: originalLayouts[key].minW,
                    minH: originalLayouts[key].minH,
                    maxH: originalLayouts[key].maxH
                };
            }),
            selectedOption: '',
            newCounter: originalLayouts.length
        };

        this.onAddItem = this.onAddItem.bind(this);
        this.onBreakPointChange = this.onBreakPointChange.bind(this);
        this.onLayoutChange = this.onLayoutChange.bind(this);
        this.onLayoutReset = this.onLayoutReset.bind(this);
  }

Это пакет. JSON: 

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.18",
        "babel-preset-react": "^6.24.1",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.11",
        "popper.js": "^1.12",
        "react": "^16.5.2",
        "react-dom": "^16.5.2"
    },
    "dependencies": {
        "react-grid-layout": "^0.16.6",
        "react-resizable": "^1.7.5",
        "react-select": "^2.0.0"
    }
}

Я что-то упустил?Потому что приложение React прекрасно работает с этим кодом.Но когда я пытаюсь отобразить его в приложении Laravel, он возвращает ошибку.Я надеюсь, у кого-то есть предложения, на которые я мог бы взглянуть.Заранее спасибо.

1 Ответ

0 голосов
/ 01 октября 2018

Свойства класса не являются стандартными ES6.Если вы хотите эту функциональность, вам нужно добавить плагин Babel:

https://babeljs.io/docs/en/babel-plugin-transform-class-properties/

Это должно быть запущено:

npm install --save-dev babel-plugin-transform-class-properties

И создание файла .babelrc в корневом каталоге вашего проекта со следующим содержимым: 

{
  "plugins": ["transform-class-properties"]
}
...