Variabled defined in external JS script on the window object is undefined in IE11

  javascript, laravel-mix, webpack

I’ve written a small module in JavaScript which defines three objects, let’s call them Snap, Crackle and Pop. They need each other, and so are they on the page itself. So I want to make them available globally on the page, so they can be used anywhere after the code has been executed, like so:

import { Snap } from './snap';
import { Crackle } from './crackle';
import { Pop } from './pop';

window.Snap = new Snap();
window.Crackle = new Snap(window.Snap);
window.Pop = new Snap(window.Crackle);

Now, this works on all modern browsers – Firefox, Chrome, Safari – like a charm, but as I need support for Internet Explorer the sorrow starts to grow. I translate my JavaScript code with Laravel Mix/WebPack like so:

let mix = require('laravel-mix');

mix.js('resources/js/export.js', '.../rice-krispies.min.js');

And the resulting code above is included at the end of the page like so:

...
<script src=".../rice-krispies.min.js"></script>
...

I’m quite sure it doesn’t work because the variables are declared in the huge IIFE that webpack generates, and Internet Explorer immediately tosses the variable as the function is exited, but I don’t know how to export these variables in a fashionable way, so I can just call them in some code after that with window.Crackle.callSnap();.

Source: Ask Javascript Questions

LEAVE A COMMENT