Laravel Elixir : Create an object of a javascript class defined in another javascript file

Question

I'm using laravel 5.3 and vuejs. I have defined a javascript class named 'Form' inside a js file named form.js and I want to create an object of this class in app.js file. I have added both js files in webpack and I have also required the 'form.js' file inside the app.js. But I get the following error :

Uncaught ReferenceError: Form is not defined ...

Here is my app.js code :

require('./bootstrap');
require('./form.js');

formElm = document.getElementById('form');

new Vue({
    el: "#form",
    data: {
        form: new Form(formElm)
    },
    methods: {
        ....
    }
});

And here is my form.js code :

class Form {
    constructor(formElm) {
        ...
    }
    ...
}

And this is how I've added the js files in gulpfile.js :

elixir(mix => {
    mix.sass('app.scss')
       .webpack(['app.js', 'form.js'], 'public/js/app.js');
});

Am I missing something ?

Cristi Jora · Accepted Answer · 2017-01-31 20:47:39Z

1

I guess you have to export it in order to use it. In your Form class: module.exports=Form or if you use the es6 import syntax export default Form

In your app js var Form = require('./form.js') should make it work

answered Jan 31, 2017 at 20:47

Cristi Jora

1,75215 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Elixir : Create an object of a javascript class defined in another javascript file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related