Swiper v6 claims "sideEffects: false" but actually HAS side effects

[xumepadismal]

This is a:

• bug
• enhancement
• feature-discussion (RFC)

Environment:

• Swiper Version: 6.0.4.
• Platform/Target and Browser Versions: macOS, CHROME.
• Framework: Angular 10

What you did

Updated Swiper from 5 to 6.

Expected Behavior

The library should work

Actual Behavior

While the library is working perfectly locally, it is completely broken when building for Production (w/ Tree Shaking)

After some investigations I found out these side effects that are cut off by webpack:

swiper/src/utils/dom.js

Lines 80 to 82 in 9ed4c97

	Object.keys(Methods).forEach((methodName) => {
	$.fn[methodName] = Methods[methodName];
	});

Adding this particular file to array of sideEffects in library's package.json solved my problem but there are other files that have similar side effects. For example, this one:

swiper/src/swiper.js

Lines 10 to 18 in 1b08355

	const components = [
	Resize,
	Observer,
	//INSTALL_COMPONENTS
	];
	Swiper.use(components);
	//EXPORT

...and styles mentioned in #3673

Possible solutions

1. I'm not sure whether it's possible to rewrite library to be really side effects free but it would be ideal solution of course :)
2. sideEffects: false in package.json can be considered as short-term solution to ensure everything is working fine
3. Include all such files into sideEffects: [...] after reviewing each source file...

[nolimits4web]

Some minimal reproduction repo? I agree to add styles to side effects as proposed in #3673. But example with Dom lib seems not valid to me. This file is imported and used (called) almost in every file. So dropping it out of bundle seems like bundler issue for me

[xumepadismal]

Thanks for quick response. Just tried to play around webpack and terser and can't reproduce the issue indeed.

However when I install new Angular app and integrate Swiper into it then the issue persist: Swiper just can't see any methods of dom7 ('children' is not a function)

Please don't close the issue so far. I will try to figure out whether it is Angular or Webpack is the source of problem and come back. Not sure that my knowledge will be enough to figure it out though

[nolimits4web]

Dom7 uses Array subclassing, (e.g. class Dom7 extends Array), not sure how Angular works but maybe it tries to add some reactivity to array, thinks it usual array and don't inherit Dom7 props properly?

Same issue with Vue (vuejs/vue#9259) but it is solved with proposed there code snippet

[xumepadismal]

Well I created issue on angular CLI but they insist that dom.js HAS a top-level side effect. Technically it's true Webpack's definition of "side effect":

A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports.

Please see the last comment of the issue I created (already closed)

[ierehon1905]

@nolimits4web I ran into the same issue. I made a minimal reproduction repo https://github.com/ierehon1905/swiper-minimal-repo. Hope it helps.

[valse]

Hi, I have the same problem with a Gatsby project: in the development all works fine but when I build the project the styles are excluded.
To solve it I've been adding a "fake" use of it:

import style from "swiper/swiper-bundle.css"
console.log(style)

[gavrashenko]

require('swiper/swiper-bundle.css');

Using require instead of import inside webpack project can be used as a temporary solution.

sideEffects in package.json doesn't affect styles which are imported using require.

[lguerra10]

I get an error in the javascript console when using swiper and Vue in the same <script>
instancing Vue as follows in a liquid page like this

const addressPageVue = Vue.createApp({
delimiters: ['${', '}'],
data() {
return {
newAddressHidden: true,
}
}

}).mount('#content')

Instacing Swiper like this

var slider = new Swiper(".swiper", {
slidesPerView: 1,
centeredSlides: true,
spaceBetween: 0,
loop: true,

navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}

})