vuejs / laravel-elixir-vue-2 Goto Github PK

View Code? Open in Web Editor NEW

106.0 9.0 20.0 7 KB

Laravel Elixir Vue 2.0 support plugin

JavaScript 100.00%

laravel-elixir-vue-2's People

Contributors

Stargazers

Watchers

Forkers

digideskio gclove sebastiandedeyne athiwatp aatibudhi coldbox-elixir crabmusket thecharge rubythonode bluebaytravel devedse 2943785277 roughtron marciopocebon carlosmolano fireflystars isabella232 seanpm2001

laravel-elixir-vue-2's Issues

[Vue warn]: Failed to mount component: template or render function not defined

The situation:

I am trying to built and load a .vue module using laravel-elixir 6 and laravel-elixir-vue-2 loader

Bellow I present the setup I used:

My package.json

"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.1",
    "vue-material": "^0.2.0",
    "vue-resource": "^1.0.3"
},

The list of installed vue-related packages: yarn ls | grep vue

├─ [email protected]
│  └─ vue-loader@^9.3.2
├─ [email protected]
├─ [email protected]
│  ├─ vue-hot-reload-api@^2.0.1
│  ├─ vue-style-loader@^1.0.0
│  ├─ vue-template-compiler@^2.0.4
│  └─ vue-template-es2015-compiler@^1.0.0
├─ [email protected]
│  └─ vue@^2.0.2
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]

My entry point app.js

window.Vue = require('vue');
require('vue-resource');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app',
    mounted() {
        console.log('Root ready.')
    }
});

My component Example.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 foo">
                 I'm an example component!
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component ready.')
        }
    }

</script>

<style lang="sass" rel="stylesheet/scss">
    $myColor: #ff6be5;
    .foo {
        background: $myColor;
    }
</style>

In my gulpfile.js

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

elixir((mix) => {
    mix.sass('test/app.scss', 'public/css/test/app.css')
        .webpack('test/app.js', 'public/js/test/app.js');
});

The gulp task completes without errors

The problem

When I am trying to load the page in the browser, I do not see the component and I get the following error

VM2926:2643 [Vue warn]: Failed to mount component: template or render function not defined.
(found in component at ...../resources/assets/js/test/components/Example.vue)

More info on the problem

The problem rise up when I removed the node_modules folder from my project root and try to re-built it using the same package.json file via yarn install

Before this, I was able to built and load the Example vue component successfully

Cannot compile *.vue modules with SCSS

I am using Laravel 5.3.19
node -v : 7.0.0
In my package.json

"devDependencies": {
"bootstrap-sass": "^3.3.7",
"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.1",
"vue-resource": "^1.0.3"
}

In my gulpfile.js

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir((mix) => {
    mix.webpack('test/app.js', 'public/js/test/app.js');
});

In app.js entry point

window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));

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

My vue component is the following

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body foo">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component ready.')
        }
    }

</script>

<style lang="scss" rel="stylesheet/scss">

    $myColor: #00ff00;
    .foo {
        background: $myColor;

    }
</style>

Finally when I run gulp, I get the following error

ERROR in ./resources/assets/js/test/components/Example.vue
Module not found: Error: Can't resolve 'scss' in '/home/igeorgas/webApps/apptree2/resources/assets/js/test/components'
 @ ./resources/assets/js/test/components/Example.vue 4:0-162
 @ ./resources/assets/js/test/app.js

and in my devtools console:

Uncaught Error: Cannot find module "!!vue-style-loader!css-loader?sourceMap!vue-loader/lib/style-rewriter?id=data-v-64df5ad8!scss!vue-loader/lib/selector?type=styles&index=0!./Example.vue"

Trying to do npm install vue-style-loader css-loader --save-dev and I still get exactly the same error

NOTE:

If I use<style lang="sass" ...> instead of <style lang="scss" ....> in my Vue component style tag, I get no errors and the module is successfully compiled

(Document how to) use runtime only build of vue

When using require(vue), then the Vue package documents that the runtime only build vue.common.js is included, as the .vue files shall be precompiled by webpack.

This package changes that behavior because it sets an alias to use vue.js instead

Note that vue.common.js contains several switches process.env.NODE_ENV !== 'production' to disable debugging code for production. When running gulp --production, then webpack injects "production" for these process.env.NODE_ENV variables. This ensures that the debugging branches are always false and minification (uglifyjs) will remove them.

But the vue.js file which will be included when using this package does not have these variables, the value is hardcoded to "development" thus enabling all debugging code regardless of the --production switch being present.

You can workaround that issue by explicitly requiring the vue.common.js file within the node_modules folder. You should at least document that this package sets the alias and how to workaround it, or in my opinion, remove the alias completely as the default behavior defined by the Vue package should fit most use cases.

Vue 2.0 and vue-loader 9.x

After editing my package.json and gulp files properly to work with laravel-elixir-vue-2, I had to remove entirely the node modules directory and run npm install in order to get the correct version of the vue-loader (see below). The vue loader was still at version 8.x

NOTE: the master branch now hosts 9.x which only works with Vue 2.0. For version 8.x which works with Vue 1.x, see the 8.x branch.

not a big deal, maybe just on my machine, anyway.

Cannot read property 'mergeConfig' of undefined

Starting from a blank directory, I did:
npm install gulp
npm install laravel-elixir-vue-2
npm install laravel-elixir

Then I got this error:

> gulp
/srv/elix2/node_modules/laravel-elixir-vue-2/index.js:4
  Elixir.webpack.mergeConfig({
                          ^
TypeError: Cannot read property 'mergeConfig' of undefined
    at /srv/elix2/node_modules/laravel-elixir-vue-2/index.js:4:17
    at /srv/elix2/node_modules/laravel-elixir/dist/index.js:29:16
    at Array.forEach (native)
    at global.Elixir (/srv/elix2/node_modules/laravel-elixir/dist/index.js:28:24)
    at Object.<anonymous> (/srv/elix2/gulpfile.js:5:1)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

Support Vue 2.3

Currently, this package does not work with Vue 2.3

TypeError: Cannot read property 'call' of undefined

Hello.
I'm trying to get vue2 to run on Laravel (obviously).

First, I install npm packages. All according to plan.
But when I run gulp I get:

</path/to/project>/node_modules/laravel-elixir-vue-2/index.js:17
  return fn.call(this, file, input, output, options)
           ^

TypeError: Cannot read property 'call' of undefined
    at Object.elixir.mixins.webpack (</path/to/project>/node_modules/laravel-elixir-vue-2/index.js:17:12)
    at </path/to/project>/gulpfile.js:18:10
    at global.Elixir (</path/to/project>/node_modules/laravel-elixir/dist/index.js:21:5)
    at Object.<anonymous> (</path/to/project>/gulpfile.js:16:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)

Here's my gulp-file:

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

elixir(function(mix) {
    mix.sass('admin/app.scss')
        .webpack('admin/app.js')
})

And at the LaraconEU workshop Evan said that the require('laravel-elixir-vue-2') needs to be within the elixir function. So I tried that too.
Like this:

const elixir = require('laravel-elixir')
elixir(function(mix) {
    require('laravel-elixir-vue-2')
    mix.sass('admin/app.scss')
        .webpack('admin/app.js')
})

Then I get:

gulp
<path/to/project>/node_modules/laravel-elixir-vue-2/index.js:21
  elixir.config.js.webpack.loaders.push(
                          ^

TypeError: Cannot read property 'loaders' of undefined
    at <path/to/project>/node_modules/laravel-elixir-vue-2/index.js:21:27
    at <path/to/project>/node_modules/laravel-elixir/dist/index.js:29:16
    at Array.forEach (native)
    at global.Elixir (<path/to/project>/node_modules/laravel-elixir/dist/index.js:28:24)
    at Object.<anonymous> (<path/to/project>/gulpfile.js:14:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)

Last is my package.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.1.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^2.0.0-rc.3",
    "vue-resource": "^0.9.3",
    "vue-router": "^2.0.0-rc.3",
    "vuex": "^2.0.0-rc.5",
    "vuex-router-sync": "^3.0.0"
  }
}

Elixir.ready is not a function!

After elixir update to @6.0.0-15 I got this error:

Elixir.ready(function () {
^

TypeError: Elixir.ready is not a function
at Object. (C:\Users\motto\Desktop\project\node_modules\laravel-elixir-vue-2\index.js:3:8)
at Module._compile (module.js:573:32)
at Object.Module._extensions..js (module.js:582:10)
at Module.load (module.js:490:32)
at tryModuleLoad (module.js:449:12)
at Function.Module._load (module.js:441:3)
at Module.require (module.js:500:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\motto\Desktop\project\gulpfile.js:3:1)
at Module._compile (module.js:573:32)

Hot Module Reload

I have no idea where to start.
Thats why I ask here.
Is it possible to use the hmr feature of the Vue single component files with Laravel elixir?
If yes, can someone push me in the right direction?

Templates not rendering

Using Vuejs 2.0

componet:

<template>

    <button class="hey-toggle" :class="{'is-toggled' : on}" @click.prevent="toggle()">
        <span class="hey-toggle__switch"></span>
    </button>

</template>


<script>

    export default {

        data() {
            return {
                on: false
            }
        },

        methods: {

            toggle() {
                this.on = !this.on;
            }

        }

    }

</script>

main js file:

// set variables for our libraries

const Vue = require('vue');
const Vuex = require('vuex');
const jQuery = require('jquery');

// set up global components
Vue.component('hey-toggle', require('./components/Toggle.vue'));


// fire up the app

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

renders as on the front end. Is there something else I should be doing?

Life cycle hook problem

I'm trying to play around with vue 2 and laravel 5.3 but there is something wrong:

gulp file:

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

elixir(mix => {
    mix.sass('main.scss', 'public/assets/css/main.css')
    .webpack('components.js','public/assets/js/components.js');
});

Compenents.js

import Vue from 'vue'
import Chart from './components/Chart.vue';
var tg = new Vue({
    el: '#todayCharts',
    components: {Chart},
    mounted: function(){console.log('test')}
});

Chart.vue (cleaned)

<script>

export default {

    data: function(){

        return {

            series: []

        };
    },


    mounted: function() {
                alert('test chart');
                console.log('test chart');
                  },
}

</script>

The template is working but nothing happen on mounted in the component and i have no errors.

Any help ?

Thank you.

Question: production ready Vue source

Hey.

Probably a stupid question, but I will ask it anyways:

Is this plugin configuring elixir and telling it to compile Vue and strip any warning (perhaps also translate templates to render functions) when elixir is running with the production flag?

Vue warn after vue-template-compiler update to 2.1.1

Hi,

I am using laravel-elixir-vue-2 and after running npm update, I am getting this error on website, though it compiles code successfully.

vue.js?3de6:515 [Vue warn]: Property or method "_leaving" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in component <transition>)

Current version of vue-template-compiler is 2.1.1

In dependencies I have:

"gulp": "^3.9.1",
"laravel-echo": "^1.0.1",
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
 "laravel-elixir-webpack-official": "^1.0.2",

...

Failed to mount component: template or render function not defined.

I have a fresh install of laravel with the Example.vue file. if I'm testing it without running gulp, everything works fine. Once I started using gulp and everything gets compiled new, I get the following error in the console:

vue.js?0598:2611[Vue warn]: Failed to mount component: template or render function not defined. 
(found in component <example> ...

The correct Vue is loaded from vue/dist/vue.js. I haven't change anything on the fresh Laravel installation, except the necessary changes in the view file to make an #app container.

Failed to mount component: template or render function not defined

gulpfile.js

const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
// require('laravel-elixir-webpack-official');    require  this  not show the error
elixir((mix) => {
    mix.webpack('app.js');
});

app.js

import Vue from 'vue';
// import Vue from 'vue/dist/vue.js';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';

Vue.use(ElementUI);

const app = new Vue({
  el: '#app',
  render: h => h(App)
});

app.vue

<template>
  <div id="app">
    <example></example>
    <el-button>Hello Element</el-button>
  </div>
</template>
<script>
  import Example from './components/Example.vue';
  export default {
    name: 'app',
    components: {
      Example
    }
  };
</script>

welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <div id="app">
    <example></example>
    <el-button>Hello</el-button>
  </div>

  <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

example.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="panel-body">
                        I'm an example component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component ready.')
        }
    }
</script>

Vuex does not work properly with the vue loader

I am using vuex with multiple stores in a modular fashion.

Vue.use(Vuex);

const eventStore = new Vuex.Store({
 ... ommited ...
});

export default eventStore

This code only works if I remove these lines :

 vue: {
      loaders: {
        js: 'buble-loader'
      }
    },

Is there something I'm missing here ?

export default {} works differently than module.exports = {}

When using exports default { ... }, require('./components/Example.vue') returns object with default key as content.

export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        increment() {
            this.counter += 1
        }
    }
}

Returns

{
    computed: Object,
    default: {
        ready: function data() {},
        methods: Object,
    }
}

module.exports = {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        increment() {
            this.counter += 1
        }
    }
}

Returns

{
    computed: Object,
    ready: function ready() {},
    methods: Object
}

Shouldn't these two examples work the same way?

Style tag does not work

I have a component like fallowing:

<template>
	<div class="media">
		<div class="media-left">
			<a href="#">
				<img class="media-object" src="#">
			</a>
		</div>
	</div>
</template>

<script>
	export default {

	}
</script>

<style scoped>
	.media {
		position: relative;
		margin: 0;
		padding: 10px;
	}
	.media-object {
		border-radius: 50%;
	}
</style>

As you can see I have some styles scoped to component in just a plain css but Vue does not render any of the styles at all it seems it does not know the style tag.

Problems with gulp --production

Hi there. I am using vue-chartjs with the latest vue via laravel elixir with webpack and recently ran into some errors. while gulp works fine, gulp --production is causing errors. Please see this issue:

apertureless/vue-chartjs#19

Could you clarify on which end the error should be fixed?

Vue packages version mismatch

After updating vuejs, gulp is not able to compile the vuejs templates.

Vue packages version mismatch:

- [email protected]
- [email protected]

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader or vueify, re-installing them should bump vue-template-compiler to the latest.
```

Support for generators functions

i get this error message when i try to make a generator function

`[15:53:13] Finished 'webpack' after 18 ms
{ [Error: ./~~/buble-loader!./~~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/modules/components/redaccion_documentos/documentos-redaccion-view.vue
Module build failed:
74 : }
75 : },
76 : mounted(){
77 :
78 : function *GeneratorCreateDocumentoSync(){//generator
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Generators are not supported (78:8)
Error
at handleError (C:\inetpub\wwwroot\laravel-vue-sci\node_modules\buble-loader\index.js:22:15)
at Object.BubleLoader (C:\inetpub\wwwroot\laravel-vue-sci\node_modules\buble-loader\index.js:38:9)
@ ./resources/assets/js/modules/components/redaccion_documentos/documentos-redaccion-view.vue 8:18-119
@ ./resources/assets/js/app.js]
message: './~~/buble-loader!./~~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/modules/components/redaccion_documentos/documentos-redaccion-view.vue\nModule build failed: \n74 : }\n75 : },\n76 : mounted(){\n77 : \n78 : function *GeneratorCreateDocumentoSync(){//generator\n ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\nGenerators are not supported (78:8)\nError\n at handleError (C:\inetpub\wwwroot\laravel-vue-sci\node_modules\buble-loader\index.js:22:15)\n at Object.BubleLoader (C:\inetpub\wwwroot\laravel-vue-sci\node_modules\buble-loader\index.js:38:9)\n @ ./resources/assets/js/modules/components/redaccion_documentos/documentos-redaccion-view.vue 8:18-119\n @ ./resources/assets/js/app.js',
showStack: false,
showProperties: true,
plugin: 'webpack-stream',
__safety: { toString: [Function: bound ] } }

Process finished with exit code 1`

Module build failed with spread transformation

HI, I try to use Vuex and it's syntax like in examples:

...
  computed: mapGetters({
    foo: 'foo',
    bar: 'bar',
    buz: 'buz'
  }),
  methods: {
    ...mapActions([
      'foo',
      'bar'
    ]),
    buz() {
      
    }
  },
...

but got error when build app with gulp:

{ [Error: ./~/buble-loader!./resources/assets/js/components/search/component.js
Module build failed: Error
    at Node.transpile (/var/.../node_modules/buble/dist/buble.umd.js:6206:11)
    at Node.transpile (/var/.../node_modules/buble/dist/buble.umd.js:880:10)
    at Node.transpile (/var/.../node_modules/buble/dist/buble.umd.js:6352:31)
    at /var/.../node_modules/buble/dist/buble.umd.js:878:59
    at Array.forEach (native)
    at Node.transpile (/var/.../node_modules/buble/dist/buble.umd.js:878:10)
    at Node.transpile (/var/.../node_modules/buble/dist/buble.umd.js:6192:31)
    at Node.transpile (/var/.../node_modules/buble/dist/buble.umd.js:880:10)
    at /var/.../node_modules/buble/dist/buble.umd.js:878:59

my gulpfile looks like:

var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(function(mix) {
  mix.webpack('foo.js', '/bar.js')
})

If i'm not using syntax like ...mapActions all good
Could you please tell me is it possible to use spread syntax just using laravel-elixir-vue-2 or i should find an additional plugin to make this work?

Export Default Not Working

I am building realtime chat using laravel and vueJs
on the input field I am using v-model but it is not returning anything:
Here is the code:

Send

Extract scss problem

So i added this to my webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    vue: {
        loaders: {
            js: 'buble-loader',
            scss: ExtractTextPlugin.extract({
                loader: 'css-loader!sass-loader',
                fallbackLoader: 'vue-style-loader'
            })
        }
    },
    plugins: [
        new ExtractTextPlugin("../css/components.css")
    ]
};

It works and extracts all style tags to an css file, only is also still injects style tags into the head. how do i disable the head style injection?? i have been trying for a whole day, its driving me crazy xD

Vue and Babel

On a new Vue instance, can you do created: () => { } instead of created: function () { } ?

Thank you.

Failure to mount when extending elixir

I have had a package which extends elixir by wrapping up and using some of the built in elixir functions (meaning the package itself uses mix.scripts etc.).

Before vue-2 I was able to do this:

elixir.extend('speak', function (message) {
  elixir(mix => {
    console.log(message);
  });
});

elixir(mix => {
    mix.sass('app.scss')
       .speak('Hello, World!')
       .webpack('app.js');
});

However, with vue-2 I am now getting the error:

[Vue warn]: Failed to mount component: template or render function not defined. (found in component )

If I simply comment out the part where I use mix, then everything loads fine:

elixir.extend('speak', function (message) {
  console.log(message);
});

I am trying to understand this behavior but so far I have not been able to figure it out, or how to solve the issue. Any explanations would be helpful.

Webpack failing on running gulp

Everything was working fine before I formatted my workstation. After new OS install I cloned my project and tried to run gulp but now following error is occurring.

I thought my component may have some error, but after commenting one mix.webpack() then it gives error for next webpack().

Following is the error

........
[13:18:16] Finished 'less' after 9.14 s
[13:18:16] Starting 'webpack'...
{[Error: ./~/buble-loader?{"objectAssign":"Object.assign"}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-core-image-upload/dist/vue-core-image-upload.vue
Module build failed: Error
    at ForOfStatement.initialise (/opt/lampp/htdocs/corporate/node_modules/buble/dist/buble.umd.js:2004:65)
    at /opt/lampp/htdocs/corporate/node_modules/buble/dist/buble.umd.js:9381:56
    at Array.forEach (native)
    at BlockStatement.initialise (/opt/lampp/htdocs/corporate/node_modules/buble/dist/buble.umd.js:9381:15)
    at FunctionExpression.initialise (/opt/lampp/htdocs/corporate/node_modules/buble/dist/buble.umd.js:858:12)
    at FunctionExpression.initialise (/opt/lampp/htdocs/corporate/node_modules/buble/dist/buble.umd.js:2098:31)
    at Property.initialise (/opt/lampp/htdocs/corporate/node_modules/buble/dist/buble.umd.js:858:12)
    at /opt/lampp/htdocs/corporate/node_modules/buble/dist/buble.umd.js:856:61
    at Array.forEach (native)
........