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

这是程序包。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应用中渲染它时，会返回错误。我希望有人能提出一些建议。提前致谢。

Answer 1

类属性不是标准的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

1 个答案: