Laravel Solution: Laravel mix, react compile and make bundle

Laravel Mix Version: 1.5.0
Node Version (v8.5.0)
NPM Version (5.5.1)
OS: Windows 10

Description:

Hi,

My issue is with compiling and bundling react:

Here's my webpack.mix.js:

const {
    mix
} = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

/* Production settings */
if (mix.inProduction()) {
    mix.version();
    mix.disableNotifications();
}
/* Sass Processing */
mix.sass('resources/assets/sass/_bootstrap.scss', 'public/css/bootstrap.css')
    .sass('resources/assets/sass/navigation.scss', 'public/css/navigation.css')
    .sass('resources/assets/sass/footer.scss', 'public/css/footer.css')
    .sass('resources/assets/sass/global.scss', 'public/css/global.css').options({
        processCssUrls: false
    })
    .sass('resources/assets/sass/cards.scss', 'public/css/cards.css')
    .sass('resources/assets/sass/forms.scss', 'public/css/forms.css')
    .sass('resources/assets/sass/search.scss', 'public/css/search.css')
    .sass('resources/assets/sass/profile.scss', 'public/css/profile.css')
    .sass('resources/assets/sass/event.scss', 'public/css/event.css')
    .sass('resources/assets/sass/entity.scss', 'public/css/entity.css')
    .sass('resources/assets/sass/travel.scss', 'public/css/travel.css')
    .sass('resources/assets/sass/favourites.scss', 'public/css/favourites.css')
    .sass('resources/assets/sass/login.scss', 'public/css/login.css');
/* Global CSS */
mix.styles([
    'resources/assets/css/bootstrap-social.css',
    'resources/assets/css/dropzone.css',
    'resources/assets/css/jquery-ui.css',
    'resources/assets/css/jquery-ui.structure.css',
    'resources/assets/css/jquery-ui.theme.css',
    'resources/assets/css/jquery.tag-editor.css',
    'resources/assets/css/font-awesome.css',
    'resources/assets/css/custom-font-awesome.css',
    'resources/assets/css/animate.css',
], 'public/css/style.css');

/* Global JS */
mix.scripts([
    'resources/assets/js/pace.js',
    'resources/assets/js/jquery.js',
    'resources/assets/js/page-load.js',
    'resources/assets/js/bootstrap.js',
    'resources/assets/js/jquery-ui.js',
    'resources/assets/js/favouriting.js',
], 'public/js/global.js');
/* Individual JS */
mix.scripts('resources/assets/js/dropzone.js', 'public/js/dropzone.js')
    .scripts('resources/assets/js/image-upload.js', 'public/js/image-upload.js')
    .scripts('resources/assets/js/googlemap.js', 'public/js/googlemap.js')
    .scripts('resources/assets/js/entity.js', 'public/js/entity.js')
    .scripts('resources/assets/js/event.js', 'public/js/event.js')
    .scripts('resources/assets/js/validation.js', 'public/js/validation.js')
    .scripts('resources/assets/js/search.js', 'public/js/search.js')
    .scripts('resources/assets/js/featured.js', 'public/js/featured.js')
    .scripts('resources/assets/js/cinema.js', 'public/js/cinema.js')
    .scripts('resources/assets/js/jquery.tag-editor.js', 'public/js/jquery.tag-editor.js')
    .scripts('resources/assets/js/counter.js', 'public/js/counter.js')
    .scripts('resources/assets/js/favourites.js', 'public/js/favourites.js')
    .scripts('resources/assets/js/googleplaces.js', 'public/js/googleplaces.js')

/* Scripts that don't use plain JS */
mix.js('resources/assets/js/homesearch.js', 'public/js/homesearch.js')
    .js('resources/assets/js/instantsearch.js', 'public/js/instantsearch.js')
    .js('resources/assets/js/tram.js', 'public/js/tram.js');
/* Admin WebPack */
mix.styles([
    'resources/assets/admin/css/bootstrap.min.css',
    'resources/assets/admin/css/font-awesome.min.css',
    'resources/assets/admin/css/skin-blue.min.css',
    'resources/assets/admin/css/AdminLTE.min.css',
    'resources/assets/admin/css/global.css',
], 'public/admin-resources/css/style.css');

mix.scripts([
    'resources/assets/admin/js/jquery.js',
    'resources/assets/admin/js/bootstrap.min.js',
    'resources/assets/admin/js/jquery-ui.min.js',
    'resources/assets/admin/js/adminlte.min.js',
    'resources/assets/js/pace.js',
    'resources/assets/admin/js/page-load.js',
    'resources/assets/admin/js/validation.js'
], 'public/admin-resources/js/script.js');

mix.sass('resources/assets/admin/sass/buttons.scss', 'public/admin-resources/css/button.css');

mix.react('resources/assets/react/actions/const.js', 'public/react/const.js');
mix.react('resources/assets/react/actions/default.js', 'public/react/default.js');
mix.react('resources/assets/react/components/Card.js', 'public/react/Card.js');
mix.react('resources/assets/react/components/Navigation/Navbar.js', 'public/react/Navbar.js');
mix.react('resources/assets/react/components/Navigation/NavbarDropdown.js', 'public/react/NavbarDropdown.js');
mix.react('resources/assets/react/components/Navigation/Navigation.js', 'public/react/Navigation.js');
mix.react('resources/assets/react/components/Navigation/ProfileNav.js', 'public/react/ProfileNav.js');
mix.react('resources/assets/react/components/Navigation/Sidebar.js', 'public/react/Sidebar.js');
mix.react('resources/assets/react/components/entity/About/About.js', 'public/react/AboutC.js');
mix.react('resources/assets/react/components/entity/About/Map.js', 'public/react/MapC.js');
mix.react('resources/assets/react/components/entity/About/Review.js', 'public/react/ReviewC.js');
mix.react('resources/assets/react/components/entity/Events/Events.js', 'public/react/EventsC.js');
mix.react('resources/assets/react/components/entity/Gallery/Gallery.js', 'public/react/GalleryC.js');
mix.react('resources/assets/react/components/entity/News/News.js', 'public/react/NewsC.js');
mix.react('resources/assets/react/components/entity/Offers/Offers.js', 'public/react/OffersC.js');
mix.react('resources/assets/react/components/entity/Social/Social.js', 'public/react/SocialC.js');
mix.react('resources/assets/react/components/entity/EntityLayout.js', 'public/react/EntityLayoutC.js');
mix.react('resources/assets/react/components/entity/EntityPage.js', 'public/react/EntityPageC.js');
mix.react('resources/assets/react/components/entity/Header.js', 'public/react/HeaderC.js');
mix.react('resources/assets/react/components/entity/LoadingSpin.js', 'public/react/LoadingSpinC.js');
mix.react('resources/assets/react/containers/EntityPage.js', 'public/react/EntityPage.js');
mix.react('resources/assets/react/containers/entity/Events/Events.js', 'public/react/Events.js');
mix.react('resources/assets/react/containers/entity/Gallery/Gallery.js', 'public/react/Gallery.js');
mix.react('resources/assets/react/containers/entity/News/News.js', 'public/react/News.js');
mix.react('resources/assets/react/containers/entity/Offers/Offers.js', 'public/react/Offers.js');
mix.react('resources/assets/react/containers/entity/Social/Facebook.js', 'public/react/Facebook.js');
mix.react('resources/assets/react/containers/entity/Social/Instagram.js', 'public/react/Instagram.js');
mix.react('resources/assets/react/containers/entity/Social/Twitter.js', 'public/react/Twitter.js');
mix.react('resources/assets/react/containers/entity/Social/YouTube.js', 'public/react/YouTube.js');
mix.react('resources/assets/react/middleware/Events/Events.js', 'public/react/Events.js');
mix.react('resources/assets/react/middleware/apiMiddleware.js', 'public/react/apiMiddleware.js');
mix.react('resources/assets/react/reducers/currentUser.js', 'public/react/currentUser.js');
mix.react('resources/assets/react/reducers/entity.js', 'public/react/entity.js');
mix.react('resources/assets/react/reducers/globals.js', 'public/react/globals.js');
mix.react('resources/assets/react/services/htmlDecode.js', 'public/react/htmlDecode.js');

mix.scripts([
    'public/react/const.js',
    'public/react/default.js',
    'public/react/Card.js',
    'public/react/Navbar.js',
    'public/react/NavbarDropdown.js',
    'public/react/Navigation.js',
    'public/react/Profile.js',
    'public/react/Sidebar.js',
    'public/react/EntityPage.js',
    'public/react/Events.js',
    'public/react/Gallery.js',
    'public/react/News.js',
    'public/react/Offers.js',
    'public/react/AboutC.js',
    'public/react/MapC.js',
    'public/react/ReviewC.js',
    'public/react/EventsC.js',
    'public/react/GalleryC.js',
    'public/react/NewsC.js',
    'public/react/OffersC.js',
    'public/react/SocialC.js',
    'public/react/EntityLayoutC.js',
    'public/react/EntityPageC.js',
    'public/react/HeaderC.js',
    'public/react/Facebook.js',
    'public/react/Instagram.js',
    'public/react/Twitter.js',
    'public/react/YouTube.js',
    'public/react/Events.js',
    'public/react/apiMiddleware.js',
    'public/react/currentUser.js',
    'public/react/entity.js',
    'public/react/globals.js',
    'public/react/htmlDecode.js'
], 'public/react/bundle.js');

mix.browserSync('http://liveandnow.app');

and 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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    },
    "devDependencies": {
        "axios": "0.16.2",
        "babel-preset-react": "^6.24.1",
        "bootstrap": "3.3.7",
        "bootstrap-sass": "3.3.7",
        "browser-sync": "2.18.13",
        "browser-sync-webpack-plugin": "1.2.0",
        "cross-env": "5.1.0",
        "laravel-mix": "1.5.0",
        "lodash": "4.17.4",
        "react": "^16.0.0",
        "react-dom": "^16.0.0",
        "webpack": "3.8.1",
        "react-google-maps": "^9.0.0",
        "react-redux": "^5.0.6",
        "react-router-dom": "^4.2.2",
        "react-scripts": "1.0.14",
        "react-transition-group": "^2.2.1",
        "react-youtube": "^7.5.0",
        "redux": "^3.7.2",
        "eslint-plugin-flowtype": "^2.39.1",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-jsx-a11y": "^5.1.1",
        "eslint-plugin-react": "^7.4.0"
    }
}

When I try to compile I get:

ERROR Failed to compile with 3 errors
10:18:32

error in ./resources/assets/react/components/Navigation/NavbarDropdown.js

Syntax Error: Unexpected token (33:15)

31 | } 32 |

33 | handleToggle = (e) => { | ^ 34 | e.preventDefault() 35 | 36 | this.setState({ open: !this.state.open })

@ multi ./resources/assets/react/components/Navigation/NavbarDropdown.js

error in ./resources/assets/react/components/Navigation/Navigation.js

Syntax Error: Unexpected token (66:15)

64 | } 65 |

66 | handleToggle = (key) => { | ^ 67 | this.setState({ [key]: this.state[key] ? false : true }) 68 | } 69 |

@ multi ./resources/assets/react/components/Navigation/Navigation.js

error in ./resources/assets/react/components/entity/Header.js

Syntax Error: Unexpected token (21:8)

19 | } 20 |

21 | state = { isFavourited: this.props.isFavourited } | ^ 22 | 23 | handleClick = e => { 24 | this.props.setFavourite(this.props.id)

```

I will give you 1 file that is causing the error: all of the 3 compile issues are the same:

import React from 'react'
import Navbar from './Navbar'
import Sidebar from './Sidebar'
import ProfileNav from './ProfileNav'

// Handles opening/closing of all navigation popups

class Navigation extends React.Component {
  constructor(props) {
    super(props)

    this.state = { profileOpen: false, menuOpen: false }

    this.setSidebarWrapperRef = this.setSidebarWrapperRef.bind(this)
    this.setNavbarWrapperRef = this.setNavbarWrapperRef.bind(this)
    this.setNavbarButtonRef = this.setNavbarButtonRef.bind(this)
    this.setSidebarButtonRef = this.setSidebarButtonRef.bind(this)
    this.handleSidebarClickOutside = this.handleSidebarClickOutside.bind(this)
    this.handleNavbarClickOutside = this.handleNavbarClickOutside.bind(this)
    this.handleToggle = this.handleToggle.bind(this)
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleSidebarClickOutside)
    document.addEventListener('mousedown', this.handleNavbarClickOutside)
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleSidebarClickOutside)
    document.removeEventListener('mousedown', this.handleNavbarClickOutside)
  }

  setSidebarWrapperRef(node) {
    this.sidebarWrapperRef = node
  }

  setNavbarWrapperRef(node) {
    this.navbarWrapperRef = node
  }

  setNavbarButtonRef(node) {
    this.navbarButtonRef = node
  }
  setSidebarButtonRef(node) {
    this.sidebarButtonRef = node
  }

  /**
   * Event if clicked on outside of sidebar element
   */
  handleSidebarClickOutside(event) {
    if (this.sidebarWrapperRef && !this.sidebarWrapperRef.contains(event.target) && !this.sidebarButtonRef.contains(event.target) && this.state.profileOpen) {
      this.setState({ profileOpen: false })
    }
  }

  /**
   * Event if clicked on outside of menu element
   */
  handleNavbarClickOutside(event) {
    if (this.navbarWrapperRef && !this.navbarWrapperRef.contains(event.target) && !this.navbarButtonRef.contains(event.target) && this.state.menuOpen) {
      this.setState({ menuOpen: false })
    }
  }

  handleToggle = (key) => {
    this.setState({ [key]: this.state[key] ? false : true })
  }

  render() {
    return <div>

      <Navbar
        {...this.props}
        open={this.state.menuOpen}
        setWrapperRef={this.setNavbarWrapperRef} />

      <Sidebar
        {...this.props}
        open={this.state.profileOpen}
        handleProfileToggle={e => { this.handleToggle('profileOpen') }}
        handleMenuToggle={e => { this.handleToggle('menuOpen') }}
        setNavbarButtonRef={this.setNavbarButtonRef}
        setSidebarButtonRef={this.setSidebarButtonRef} />

      <ProfileNav
        {...this.props}
        open={this.state.profileOpen}
        setWrapperRef={this.setSidebarWrapperRef} />

    </div>
  }
}

export default Navigation

Please, can someone save me from these errors, the person who did this react used create-react-app and react-scripts, but now I need to make it to work with laravel mix

via Chebli Mohamed

Laravel Solution

vendredi 27 octobre 2017

Laravel mix, react compile and make bundle

Description:

Aucun commentaire:

Enregistrer un commentaire