swup / gia-plugin Goto Github PK

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?

After upgrading Swup to v4 and gia-plugin to v2.0.1, the code no longer compiles with webpack (laravel-mix).
I get the following errors:

I have found out that this is caused by the lack of the .js extension in the import statements of this plugin:

import t from "gia/loadComponents";
import n from "gia/removeComponents";
import s from "gia/config";

Setting the fullySpecified option (defaults to true) in webpack resolves the compilation problem:

module: {
      rules: [
        {
          test: /\.m?js$/,
          resolve: {
            fullySpecified: false, // disable the behaviour
          },
        },
      ],
    },

However, now there's a runtime error:
TypeError: gia_config_js__WEBPACK_IMPORTED_MODULE_3__.set is not a function.

The only thing that solves it for me is adding the .js extensions to the import statements.
Can those be added in?
Thanks,
Luca