Laravel elixir: Module build failed: SyntaxError: 'with' in strict mode

[iraklisg]

I didi the following procedure using Vue2 and a fresh Laravel 5.3 install

npm install --save vue-material

In my js entry file (assets/js/app.js)

import Vue from 'vue'
import VueMaterial from 'vue-material'

Vue.use(VueMaterial);
Vue.material.theme.register('default', {
    primary: 'cyan',
    accent: 'pink'
});

const app = new Vue({
    el: '#app',
)}

In my css entry file (assets/css/app.scss)

@import "node_modules/vue-material/dist/vue-material.css";

In my gulpfile

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');

elixir(mix => {
    mix.sass('app.scss')
        .webpack('app.js');
});

But I get the following error

Error: ./~/vue-material/dist/vue-material.js
│Module build failed: SyntaxError: 'with' in strict mode (8:13503)

[marcosmoura]

Hi @iraklisg!

Which version of node and Elixir are you using?
I think that Elixir is trying to compile vue-material with Babel again through Webpack config.
I will try to simulate this error here and I answer this later, ok?

Thank you!

[krisanalfa]

Hi @iraklisg, I'm using Laravel 5.3.21, which is it uses Vue 2.x as default. I was struggling to make this awesome work implemented on my project. So here's my bootstrap.js file:

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

const Vue = window.Vue = require('vue');
const VueMaterial = require('vue-material');
const VueResource = require('vue-resource');

Vue.use(VueMaterial.default);
Vue.use(VueResource);

To load CSS, you may append this line to your app.scss:

// Vue Material
@import "node_modules/vue-material/dist/vue-material";

Run:

gulp

Everything works fine now. Here's my package.json file:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "css-loader": "^0.25.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.2",
    "vue-material": "^0.2.0",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {}
}

[pnishank]

worked for me thanks 👍 :) @krisanalfa

[marcosmoura]

@krisanalfa Thanks a lot man. I will improve the documentation adding this Elixir part. As the Laravel community embraced Vue, this can help more user to figure it out how to work with Vue Material.

[krisanalfa]

Hope I can contribute to it's development too, gotta have a couple time firstly to understanding this great work. But anyway, I am so glad to help, man.

[iraklisg]

@krisanalfa sorry for the late reply, I just found the time to check your solution and I do confirm that everything works fine. @marcosmoura congrats for the polished work you've done so far

[marcosmoura]

Vue.use(VueMaterial.default) will no longer work on the next version. You should use Vue.use(VueMaterial) instead.

[alphaelf]

tanks marcos