Class is not a Constructor

Hey everybody,

I'm trying to dive into the great world of JS, ES6 and browserify and did follow this tutorial: https://laracasts.com/series/laravel-5-and-the-front-end/episodes/8

I'm using a fresh 5.2 installation of Laravel and create these files:

// resources/js/main.js
var Counter = require('./modules/Counter');
new Counter();

// resources/js/modules/Counter.js
export default class Counter {
    constructor(){
        console.log('init..');
    }
}

// gulpfile.js
mix.browserify('main.js');

But when I load my view that includes the processed main.js file I'm getting: "main.js:5 Uncaught TypeError: Counter is not a constructor"

Do you have any idea what I'm doing wrong here?? Thanks a lot!

DarkRoast

9 years ago

Level 8

Not sure about the error but that series might be a bit out of date now - take a look at this one. For custom components I would recommend using Jeffs laravel-elixir-vueify package.

More info on vueify: https://vuejs.org/guide/application.html

bart

9 years ago

Level 13

Hey, thanks for your quick answer. It hasn't to do anything with VueJS, so it doesn't feel the right way imo. I'm trying to understand the problem here. Is it an ES6 issue?

d3xt3r

9 years ago

Best Answer

Level 29

Well the way you are exporting it should be consistent with the way you import it..

ES6 style

import Counter from './modules/Counter.js';
new Counter();

Using require

var Counter = require('./modules/Counter.js');
new Counter.default();

export class Counter {
    ...
}

var Counter = require('./modules/Counter.js');
new Counter.Counter();

// -- OR --

import {Counter} from './modules/Counter.js'
new Counter();

2 likes

bart

9 years ago

Level 13

Thanks @d3xt3r! Using import Counter from './modules/Counter.js'; did the trick. Great!

Please or to participate in this conversation.