ScrollReveal is not defined with webpack [solved v3.0.5]

[marciomunhoz]

When using ScrollReveal with webpack, the object ScrollReveal is not defined. Have someone experienced the same issue?

Thanks!

[volnei]

+1 with last version

[tamamadesu]

same question!

[tforssander]

I noticed a similar error when updating to the 3.0.3 release and noticed that I needed to change from window.sr = new scrollReveal(config); to window.sr = ScrollReveal(config); (notice the uppercased S).

[volnei]

I have tried with all possible cases with no success. The error appears when lib is loaded.

[volnei]

The error occurs on return ScrollReveal; at line 473 of file https://github.com/jlmakes/scrollreveal.js/blob/master/dist/scrollreveal.js

I think is caused by a package tooling used to build the dist. Maybe this is incompatible with webpack? I think this is generated by gulp on config umd({ namespace: 'ScrollReveal', exports: 'ScrollReveal' }), but i'm not familiar with gulp... =/

[volnei]

@jlmakes it works by using the scrollreveal.js (before wrap) but need a change in the code at line 456

-  var _requestAnimationFrame = this.requestAnimationFrame       ||
-                               this.webkitRequestAnimationFrame ||
-                               this.mozRequestAnimationFrame;
+  var _requestAnimationFrame = window.requestAnimationFrame       ||
+                               window.webkitRequestAnimationFrame ||
+                               window.mozRequestAnimationFrame;

If you are interested to investigate, I just create a repo with an example app to simulate the problem.

git clone https://github.com/volnei/webpack-scrollreveal.git
npm install
npm run build

And open the index.html file after making the changes above.

Hope this helps!

[jlmakes]

Thanks @volnei I will explicitly reference window in the next release. Still working on a solution… :bow:

[jlmakes]

@volnei First, I believe I’ve confirmed this part of your index.js needs to be changed:

- import {ScrollReveal, Tools} from 'scrollreveal'
+ import ScrollReveal from 'scrollreveal'

window.sr = ScrollReveal()
window.sr.reveal('.box')

Secondly, update ScrollReveal from v3.0.3 to v3.0.5:

npm update scrollreveal

Afterwards…

@volnei @marciomunhoz @tamamadesu @tforssander I published v3.0.5 with the necessary changes, and have confirmed it is working with Webpack! :bow:

[volnei]

Thank you a lot @jlmakes. Now it works fine :smile:

[yarhtut]

👍 Thanks, @jlmakes

[birksy89]

For me this worked:

import ScrollReveal from 'scrollreveal'

Whereas before I tried:

import 'scrollreveal'

[luciancic]

Tried with the latest version (3.3.6) and did not work with webpack, but when I reverted to scrollreveal@3.0.5 it worked just fine.

[jlmakes]

Can you do me a favor and test with scrollreveal@beta please @lucian95?

[luciancic]

Sure thing. It did load from webpack but it only contained an __esModule and default property. Is that the object you intended to return with require('scrollreveal')? Seems off.

[jlmakes]

That looks like the result of a the Babel ES2015 to Common JS Plugin @lucian95.

I'm not sure, but seems like if you're going to consume the default export of a ES2015 module with Babel v6+, you'd need to do this:

const ScrollReveal = require('scrollreveal').default

Also mentioned in the Babel documentation, is a plugin that automatically unboxes the default property value as Node's module.exports, called babel-plugin-add-module-exports... which as I understand should allow you to write:

const ScrollReveal = require('scrollreveal')

[luciancic]

In that case yes, doing require('scrollreveal').default().reveal(...) works properly. I tried it again just now.