Roots Discourse

Adjust webpack to transpile 'class' JS statements for IE11

Hi all,

I am using a package for animations called AOS (animate on scroll library https://michalsnik.github.io/aos/ ) . Unfortunately the aos/src/js/helpers/detector.js has a “class Detector” definition which stops IE11 js execution cold.

I have already tried yarn add remy/polyfills and require( ‘polyfills’ ); in main.js above the AOS include statement. It also seems like we have babel present with babel-code-frame and babel-runtime packages. (although I am not familiar with babel configuration). Just wondering how I can get a polyfill to stick or otherwise work around this “class” issue by possibly changing webpack configuration or something that can leverage babel perhaps.

Thanks!

Classes are an ES6 language feature and cannot be polyfilled. If you need them in an environment that doesn’t support ES6 (for instance, IE11) then you’ll need to transpile them. Babel can do this for you. babel-preset-env is one way to do that: https://babeljs.io/docs/en/babel-preset-env

I would recommend taking this issue up w/ the developers of the plugin you’re trying to use, or the babeljs stackoverflow tag: https://stackoverflow.com/questions/tagged/babeljs. The issue you’ve described seems like a more general configuration issue, not something directly related to Sage or another part of the Roots stack, and we try to keep these forums focused on those things.

Thanks for the info. I have filed a note on the appropriate thread for the AOS plugin here. https://github.com/michalsnik/aos/issues/244

A more relevant sage related question is whether there are toggles that relate to this kind of webpack configuration. at /resources/assets/build/webpack.config.js, I found,
minimize: config.enabled.optimize,
and wasn’t sure how to best work with sage (or yarn) to control that value. (for the purposes of debugging i just set it to false temporarily and that was fine). Cheers.