CODEWITHSUNDEEP
reactjslaravellaravel-mix
Baspa
Baspa

Reputation: 1168

Module build failed Laravel-mix

For school we have to make a back-end for a React front-end. So we decided to use Laravel-mix to do this. I copied a component from the React project to our new Laravel-mix project. But when I'm trying to render I get the following error: Error

But when I take a look at the code nothing seems wrong. This is a bit of the components' code:

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

This is the 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"
    }
}

Am i missing something? Because the React app works fine with this code. But when I try to render it in the Laravel app it returns the error. I hope someone has some suggestions where I might look at. Thanks in advance.

Upvotes: 0

Views: 1785

Answers (1)

Stephan-v
Stephan-v

Reputation: 20369

Class properties are not standard ES6. If you want this functionality you need to add a Babel plugin:

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

This should come down to running:

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

And creating a .babelrc file in your project root with the following content:

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

Upvotes: 1

Related Questions