模块构建失败 Laravel-mix

Question

对于学校，我们必须为 React 前端制作后端。所以我们决定使用 Laravel-mix 来做到这一点。我从 React 项目复制了一个组件到我们新的 Laravel-mix 项目。但是当我尝试渲染时出现以下错误：

但是当我查看代码时，似乎没有任何问题。这是一些组件的代码：

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);
  }

这是package.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 应用程序中呈现它时，它 returns 出现了错误。我希望有人能给我一些建议，我可以看看。提前致谢。

Answer 1

Class 属性不是标准的 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"]
}

模块构建失败 Laravel-mix

Module build failed Laravel-mix

laravel

reactjs

laravel-mix