Webpack can't resolve imported Gia files due to missing .js extension about gia-plugin HOT 17 CLOSED

@jaxtheking No, haven't had a good chance as I've been away from the keyboard. I'll look into this later today or this week.

from gia-plugin.

I have a feeling that this should be tackled at the root, by correctly defining ESM exports in gia itself. But we don't have easy access to the repo, so if adding the .js extensions here in the plugin works as well, let's try that first.

from gia-plugin.

Version 2.0.2 of the plugin should land on npm in a few seconds. That should fix your issue by adding file extensions to import paths. Let us know if it doesn't!

from gia-plugin.

Hi @daun,
thanks for the prompt response! Unfortunately the plugin is not working at all due to runtime errors.

When I import your npm package (import SwupGiaPlugin from '@swup/gia-plugin';), runtime errors raise every time one of the imported functions (config, loadComponents, removeComponents) are called.
However, if I include your plugin's source code directly into my project, v2.0.2 works perfectly with no runtime errors.

I cloned your repo and investigated further. It does not matter what I do, the gia functions import as ESM objects ({'__esModule': true, 'default': f}) and never resolve to their default value (function).
You might be right, it may depend on the ESM exports in gia (then again, your plugin works fine as part of my project) but I suspect something in the microbundle setup.

Either way, the solution is easy yet inelegant: .default must be appended to each imported function's name (i.e. config.default.set instead of config.set).
This will definitely fix the issues.

from gia-plugin.

FYI

import Plugin from '@swup/plugin';
import loadComponents from 'gia/loadComponents.js';
import removeComponents from 'gia/removeComponents.js';
import config from 'gia/config.js';

export default class SwupGiaPlugin extends Plugin {
	name = 'SwupGiaPlugin';

	requires = { swup: '>=4' };

	defaults = {
		components: {},
		firstLoad: true,
		log: false
	};

	get containers() {
		const selector = this.swup.visit.containers.join(', ');
		return Array.from(document.querySelectorAll(selector));
	}

	constructor(options = {}) {
		super();
		this.options = { ...this.defaults, ...options };
	}

	mount() {
		config.default.set('log', this.options.log);
		// This would work too.
		// const config = require('gia/config.js').default;

		this.before('content:replace', this.unloadComponents);
		this.on('content:replace', this.mountComponents);

		if (this.options.firstLoad) {
			this.mountComponents();
		}
	}

	unmount() {
		super.unmount();
		this.unloadComponents();
	}

	mountComponents() {
		const { components } = this.options;
		this.containers.forEach((container) => loadComponents.default(components, container));
	}

	unloadComponents() {
		this.containers.forEach((container) => removeComponents.default(container));
	}
}

from gia-plugin.

Sorry @daun, have you had the chance to review this at all?

from gia-plugin.

I have a feeling it's related to TypeScript's esModuleInterop compiler option. Just leaving this here as a note for later.

from gia-plugin.

@jaxtheking Can you try version 2.0.3 and let us know if this is fixed?

from gia-plugin.

I think it isn't fixed. Just tested it locally

from gia-plugin.

@hirasso Can you post the exact error?

from gia-plugin.

It's the same as above:

TypeError: gia_config_js__WEBPACK_IMPORTED_MODULE_3__.set is not a function.

It's caused by the import paths in @swup/gia-plugin:

import loadComponents from 'gia/loadComponents.js';
import removeComponents from 'gia/removeComponents.js';
import config from 'gia/config.js';

If you change that to the following, it starts working:

import loadComponents from 'gia/dist/loadComponents.js';
import removeComponents from 'gia/dist/removeComponents.js';
import config from 'gia/dist/config.js';

Gia seems a bit messy to me – we should probably try and fix it on their end. But we don't have writing rights, do we? Maybe best to talk it through in a quick call.

from gia-plugin.

I can confirm it doesn't work.
The solution suggested by @hirasso seems a reasonable temporary fix until the issue is fixed on Gia's end?

from gia-plugin.

@hirasso What do you think? Should we just merge your workaround in the fix/gia-imports branch?

from gia-plugin.

Let's try it and see what happens. Hopefully, the files under /dist actually have the same features like the toplevel files.

from gia-plugin.

@jaxtheking we've released an attempted fix in https://github.com/swup/gia-plugin/releases/tag/2.0.4. Could you test if it works for you now?

from gia-plugin.

I can confirm v2.0.4 works. No more runtime errors and components do load and remove correctly as one navigates across pages.

However, since I import gia files elsewhere in my project, my bundle now contains two versions of the 3 files imported by this plugin; one from the gia/dist/ (5x larger) and one from gia/. I'm just pointing it out, this is completely trivial due to the negligible file sizes.

I'm still perplexed as to why if I copy the index.js file from version 2.0.2 and include it directly into my project, the files are not imported as modules and it all works without errors!?
Anyway, thanks for the fix!

from gia-plugin.

I'll close this as resolved. That's probably the best we can do on our end.

from gia-plugin.