Netlify adapter complains about ES module requires #5727
Comments
|
@campbell-hay can you provide a repository that reproduces this issue? If not, this issue will be closed |
|
@benmccann Sure sorry I forgot about that. I have created a test repository here: If you run For completeness I have hosted this repo as well on netlify so you can see the error message. 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. |
|
It looks like it's because the dependency is ESM-only and Netlify is very slow at providing ESM support: netlify/zip-it-and-ship-it#750 For now, I think you can work around it with the following setting in Alternatively, you could probably work around it by using Netlify's |
benmccann
added
bug
|
@benmccann , I see. I used the first solution with the |
|
Fixed by #6666. You should no longer need the 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-netlify
It 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
System: OS: macOS 12.1 CPU: (8) arm64 Apple M1 Memory: 85.25 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 18.2.0 - /opt/homebrew/bin/node npm: 8.9.0 - /opt/homebrew/bin/npm Browsers: Chrome: 103.0.5060.134 Firefox: 100.0 Safari: 15.2 npmPackages: @sveltejs/adapter-auto: next => 1.0.0-next.63 @sveltejs/adapter-netlify: ^1.0.0-next.71 => 1.0.0-next.71 @sveltejs/kit: next => 1.0.0-next.392 svelte: ^3.44.0 => 3.49.0 vite: ^3.0.2 => 3.0.3Severity
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.The text was updated successfully, but these errors were encountered: