-
Hello Máximo, I've found the way to îles via your appeareance on the Views on Vue podcast (https://viewsonvue.com/islands-architecture-in-vue-with-m-ximo-mussini-vue-170) and I'm currently poking around and checking feasibility for an upcoming project. Iles is great! Lots of stuff to learn for a backend dev like me. I tried integrating an image gallery named Photoswipe (https://photoswipe.com/v5/docs/getting-started/). This is easy and works fine. When building the project though, the iles SSG said:
Photoswipe is installed via import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js'
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js' What I've triedI went and started learning about the different module systems in JS and how bundlers work. I now know that the package I want to use is a ES6 module and that the iles SSR somehow does not like it. Not sure why, though. I tried renaming the files from I tried importing and building in the Vue3 + Vite starter template with success. So I think that this is not Vite-related. It might be obvious to you, but I am kinda stuck at this point. ReproductionThank you very much for pointing me into the right direction on how to properly include an ES6 module in the build. In case you want to reproduce the error, that should be quite easy:
Append to import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js'
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js'
const lightbox = new PhotoSwipeLightbox({
gallery: '#my-gallery',
children: 'a',
pswpModule: PhotoSwipe
});
lightbox.init();
console.log(lightbox) Then build
Thank you very much! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
Hi Lucas! @lutuh Vite relies on modern practices to detect whether a package is CJS or ESM, or both, and performs certain optimizations (like pre-bundling during dev, or external during SSR), to ensure it's loaded in the more efficient way. Package ProblemIt seems that this package has not been updated to use [recent practices to be compatible with CJS and ESM at the same time. For example, it does not supply the In addition, the SolutionFork (or make a PR) to add the "type": "module",
"exports": {
".": "./dist/photoswipe.esm.js",
"./lightbox": "./dist/photoswipe-lightbox.esm.js"
}, Alternatively, you can look for a different package that has been updated to support ESM/CJS. The following is something that you might find useful given the kind of library that you are trying to import, but feel free to ignore for now. Accessing the DOM ProblemSince this particular package uses the DOM directly (
SolutionYou can use a dynamic import behind a condition that checks the // Runs only in the client, not when rendering pages during the build
if (!import.meta.env.SSR) {
const PhotoSwipeLightbox = (await import('photoswipe/lightbox')).default
const lightbox = new PhotoSwipeLightbox({ ... })
} However, in this case using import { onMounted } from 'vue'
onMounted(async () => {
const PhotoSwipeLightbox = (await import('photoswipe/lightbox')).default
const PhotoSwipe = (await import('photoswipe')).default
const lightbox = new PhotoSwipeLightbox({
gallery: '#my-gallery',
children: 'a',
pswpModule: PhotoSwipe
});
lightbox.init();
console.log(lightbox)
}) Since you are asking in the context of îles, it's likely that you want this to be interactive. To do that, you can use <script client:load lang="ts">
import PhotoSwipeLightbox from 'photoswipe/lightbox'
import PhotoSwipe from 'photoswipe'
export function onLoad (el) {
const lightbox = new PhotoSwipeLightbox({
gallery: '#my-gallery',
children: 'a',
pswpModule: PhotoSwipe
});
lightbox.init();
console.log(lightbox)
}
</script> |
Beta Was this translation helpful? Give feedback.
-
Hello Máximo, now it all comes together. Thank you so much for your detailed and structured response! I've been playing with The code is already running in an island Vue component (via Making the let lightbox = ref(null)
onMounted(async () => {
...
lightbox.value = new PhotoSwipeLightbox({
...
})
lightbox.value.init()
}) Thanks again! Lucas |
Beta Was this translation helpful? Give feedback.
Hi Lucas! @lutuh
Vite relies on modern practices to detect whether a package is CJS or ESM, or both, and performs certain optimizations (like pre-bundling during dev, or external during SSR), to ensure it's loaded in the more efficient way.
Package Problem
It seems that this package has not been updated to use [recent practices to be compatible with CJS and ESM at the same time.
For example, it does not supply the
exports
field (nor themodule
field as a fallback), and it does not have"type": "module"
.In addition, the
main
entry it supplies, does not exist.Solution
Fork (or make a PR) to add the
exports
field to thepackage.json
: