mbagentur's avatar

ES6-Module/Class + Elixir + inline JS = *Class* not defined

Hi,

Problem is as follows:

  • I have an ES6-Module (Schedule.js) which export a class called Schedule
class Schedule {

    /**
     * Initialize Schedule
     * @param  Object options 
     * @return void        
     */
    constructor(options = {}) {
    ...
    }

....
}
export default Schedule;
  • In my blade-file I import this module like so:
@section('js')
    <script src="{{asset('/js/schedule/Schedule.js')}}"></script>
@endsection
  • later I need to initialize a new Schedule inline (!) (routes, variables from php etc.):
@section('inline-js')
    <script>
        window.schedule = new Schedule({
            url: route('schedule.save'),
            table: document.getElementsByClassName('schedule_daily')[0]
        });
    </script>
@endsection
  • I use Elixir to compile my ES6 to ES5 and do some neccessary bundeling etc.
  • the Section inline-js comes after the js-Section
  • I get the error Uncaught ReferenceError: Schedule is not defined
  • All other imports/exports I do in multiple, different .js-Files work btw

Any ideas what the Problem here is and/or how to solve this?

0 likes
3 replies
mbagentur's avatar

Nothing special in there:

var elixir = require('laravel-elixir');
elixir(function(mix) {
...
    //Schedule
    mix.browserify(['/behindyou/Schedule/Bar.js'],'public/js/schedule/Bar.js');
    mix.browserify(['/behindyou/Schedule/Schedule.js'],'public/js/schedule/Schedule.js');
    mix.browserify(['/behindyou/Schedule/Mouse.js'],'public/js/schedule/Mouse.js');
    mix.browserify(['/behindyou/EventEmitter.js'],'public/js/schedule/EventEmitter.js');

...
});

Hope I didn't forget something?!

All other imports/exports I do in multiple, different .js-Files work btw

Edit

Looks like this problem has something to do with the Module-Loader spec. https://github.com/ModuleLoader/es6-module-loader As always - quite overwhelming.

  • What compiler to use? babel? traceur? typescript?
  • Is there already a laravel elixir/browserify solution maybe already for the moduleLoader??
  • When and where and how to use the ES6 Module Loader Polyfill?

@JeffreyWay Is this the problem? And if so - will there be a video on this topic? I would really like that because why use ES6(-Modules) if you can't use it/them inline?! ;)

Thank you very much

se468's avatar

I have the same problem. How do you solve this?

Please or to participate in this conversation.