error when using with webpack

[dev-seahouse]

i got the following error in dev tool and yet it is still working.

app.js?id=06c12ce…:561 Uncaught TypeError: e.removeEventListener is not a function
    at Object.u.drop (app.js?id=06c12ce…:561)
    at Object.u.check (app.js?id=06c12ce…:561)
    at Object.u.render (app.js?id=06c12ce…:561)
    at Object.u.init (app.js?id=06c12ce…:561)
    at Facilis er...:261

What i did:

window.progressively= require(progressively);
progressively.init();

[dev-seahouse]

;
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(function () {
     root = window; // <========= this fixed it, the problem seem to be 'root' is not window object for some reason
      return factory(root)
    })
  } else if (typeof exports === 'object') {
    module.exports = factory
  } else {
    root.progressively = factory(root)
  }
})(this, function (root) {
  'use strict'

[thinker3197]

This seems to be happening because root is not defined when the factory function is exported. I'll find a workaround soon and post it in this thread. Till then, you could use webpack's external configuration. Hope that will solve your problem.

[the94air]

@thinker3197 Did you find any solution? I kind of running in the same issue.

[thinker3197]

I tried out a few other plugins and this is a common issue when using js/jquery libraries with webpack. This happens, as I stated above because webpack wraps the package in it's own object while bundling thus loosing the access to window object. You can use the above mentioned solution if that helps!

[the94air]

Then.. I guess I will use the CDN version for now. Thanks.

[koishimasato]

@dev-seahouse

In my environments, this would work. (webpack 3)

in webpack.config.js:

module: {
  rules: [
      ...
      {
        test: /progressively.*\.js$/,
        loader: 'imports-loader?this=>window',
      },
   ],
  },

in js:

import progressively from 'progressively';
progressively.init();

[the94air]

Thanks @koishimasato for sharing the solution. I'll try it out later.

[cgpro]

@koishimasato solution doesn't work with webpack 4. Any ideas?

[LockeAG]

;
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(function () {
     root = window; // <========= this fixed it, the problem seem to be 'root' is not window object for some reason
      return factory(root)
    })
  } else if (typeof exports === 'object') {
    module.exports = factory
  } else {
    root.progressively = factory(root)
  }
})(this, function (root) {
  'use strict'

Yep , this works 👍

import progressively from 'progressively/src/progressively';