- 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:32error 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
from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2iCF7hr
via IFTTT
Aucun commentaire:
Enregistrer un commentaire