benmccann
commented
2 years ago @campbell-hay can you provide a repository that reproduces this issue? If not, this issue will be closed
Closed campbell-hay closed 2 years ago
benmccann
commented
2 years ago @campbell-hay can you provide a repository that reproduces this issue? If not, this issue will be closed
campbell-hay
commented
2 years ago @benmccann Sure sorry I forgot about that.
I have created a test repository here: https://github.com/mig-hub/sveltekit-on-netlify
If you run npm run dev locally, you'll see the index page works.
But once pushed on Netlify it builds fine but shows an error.
For completeness I have hosted this repo as well on netlify so you can see the error message. Here it is: https://whimsical-platypus-6bd86e.netlify.app
I have used the exact same package-lock.json from my original project with all the dependencies I have, just in case.
Let me know if you need to know anything else.
Thank you for your time.
benmccann
commented
2 years ago It looks like it's because the dependency is ESM-only and Netlify is very slow at providing ESM support: https://github.com/netlify/zip-it-and-ship-it/issues/750
For now, I think you can work around it with the following setting in vite.config.js:
ssr: {
noExternal: ['ssr-window']
}Alternatively, you could probably work around it by using Netlify's esbuild option.
campbell-hay
commented
2 years ago @benmccann , I see. I used the first solution with the ssr.noExternal setting. Let's wait on Netlify then.
geoffrich
commented
2 years ago Fixed by #6666. You should no longer need the vite.config.js workaround if you install adapter-netlify 1.0.0-next.77.
I verified by creating a new Kit app and using the page component in the linked repo. It works as expected when deployed to Netlify.
<script>
import { Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/svelte";
import "swiper/scss";
import "swiper/scss/pagination";
let slides = [
{
src: "https://www.fillmurray.com/200/125/",
},
{
src: "https://www.fillmurray.com/200/125/",
},
{
src: "https://www.fillmurray.com/200/125/",
},
];
</script>
<h1>Welcome to SvelteKit</h1>
<Swiper
modules={[Pagination]}
autoHeight={true}
pagination={{ clickable: true }}
>
{#each slides as slide}
<SwiperSlide>
<img src={slide.src} alt="" />
</SwiperSlide>
{/each}
</Swiper>
Describe the bug
I am having problems on a new project and they seem to all be related to
requirevsimport. I don't know enough of the internals to get if it comes from svelte-kit, the netlify adapter, vite or something else.Currently I use a Swiper module on one page. This page works fine locally with the dev server, but as soon as I check it live on Netlify, then I get this error on the page where the slideshow is:
As far as I can tell ssr-window is a dependency of Swiper.
It looks to me that the difference is that in the build directory (i.e. when using the dev command) it is all built with imports. Whereas in the .netlify directory created by the netlify adapter, it uses requires.
It is worth noting that the error does not show when navigating to the page with the nav. Only when landing on this page first.
In my logs below, the page in question is
test.svelte. It seems to be bigger than the other files while being similar in code size, but maybe swiper is included in there. Not sure.Reproduction
My Swiper version is
8.3.1. Here is a repo isolating what I am having a problem with: https://github.com/mig-hub/sveltekit-on-netlifyIt works in dev environment. And here is this repo hosted on Netlify: https://whimsical-platypus-6bd86e.netlify.app/ It shows the error on the index page.
Logs
System Info
Severity
blocking an upgrade
Additional Information
I was having a kind of similar issue with Contenful before. It did not want to build at all, and the message was:
I was importing this way which is working on previous Sveltekit projects:
I tried many things including what the message suggested, but when it was building then it would produce a similar error at run time. Also it behaved differently on Netlify compared to the local dev. What finally made things disappear was to import contentful and run the query inside an
/data.json.jsendpoint as opposed to importing in the module script.