Cannot integrate Gia Plugin with swup 4.1
Closed this issue · 3 comments
Description
I'm trying to create a swup instance with the Gia plugin enabled. Launching the instance without the plugin works just fine, but when adding an instance of it to the plugins option, the instance throws an error and transitions are broken.
Code to launch swup instance:
import Foo from "../components/Foo";
const components = { Foo };
const swupOptions = {
plugins: [ new SwupGiaPlugin({ components }) ],
};
const swupInstance = new Swup(swupOptions);Resulting in the following error:
index.modern.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'containers')
at get containers [as containers] (index.modern.js:1:414)
at Zt.mountComponents (index.modern.js:1:940)
at Zt.mount (index.modern.js:1:816)
at St.mt [as use] (Swup.modern.js:1:12873)
at Swup.modern.js:1:15339
at Array.forEach (<anonymous>)
at St.enable (Swup.modern.js:1:15323)
at new St (Swup.modern.js:1:15016)
at t.value (appMod-swup.js:108:26)
at t.value (appMod-swup.js:71:10)
(Edit) After a quick look through the plugin's repo, it looks like the mountComponents() and unloadComponents() method fail to get the containers from the plugin instance:
mountComponents() {
const { components } = this.options;
this.containers.forEach((container) => loadComponents(components, container));
// ^^^^
// undefined when method is called?
}
unloadComponents() {
this.containers.forEach((container) => removeComponents(container));
// ^^^^
// undefined when method is called?
}How to reproduce the issue
Create a new swup instance that is being passed an instance of the Gia plugin in the array set as its plugins option's value.
A reduced test case that displays the error can be found here: https://codesandbox.io/s/swup-4-gia-plugin-test-h5wvgh
Open the code sandbox link, click on the page 1 link in the examples navigation and observe the console, it will display the same error mentioned above.
Context and environment
swup version: 4.1
Browser: Chrome, Version 115.0.5790.114 (Official Build) (arm64)
Device: Apple MacBook Pro M1 Max
Before creating this issue...
- Have you provided all helpful information available?
- Have you checked closed issues for similar/related problems?
- Have you considered creating a demo so we can help you better?
Thank you for this detailed bug report! This likely slipped through during our recent updates for swup4.
Would you like to try your hand at fixing this in a PR?
Hey @joh-sch, thanks for reporting! I've found the issue and created a fix at #17. I'll ping you once it's merged and released.
In the meantime, you can patch your local copy:
get containers() {
- const selector = this.swup.context.containers.join(', ');
+ const selector = this.swup.visit.containers.join(', ');
return Array.from(document.querySelectorAll(selector));
}