I’m having some issues deploying my site to Netlify. I’m using Hydrogen to develop a new website and I already had a few builds a few month ago that worked perfectly, but when I want to use some dependencies like Lottie or react-slick, the deploy throws an error because of the edges functions. For example whenever I import Lottie and want to deploy I get this error:
4:45:19 PM: (build.command completed in 20.2s)
4:45:19 PM: Edge Functions bundling
4:45:19 PM: ──────────────────────────────────────────────
4:45:19 PM: Packaging Edge Functions from .netlify/edge-functions directory:
4:45:19 PM: - handler
4:45:20 PM: ReferenceError: document is not defined
4:45:20 PM: at createTag (file:///opt/build/repo/.netlify/edge-functions/handler/index.js:345:7572)
4:45:20 PM: at file:///opt/build/repo/.netlify/edge-functions/handler/index.js:345:21482
4:45:20 PM: at file:///opt/build/repo/.netlify/edge-functions/handler/index.js:345:21612
4:45:20 PM: at file:///opt/build/repo/.netlify/edge-functions/handler/index.js:345:24592
4:45:20 PM: at lottie (file:///opt/build/repo/.netlify/edge-functions/handler/index.js:345:7231)
4:45:20 PM: at file:///opt/build/repo/.netlify/edge-functions/handler/index.js:345:7236
4:45:20 PM: at file:///opt/build/repo/.netlify/edge-functions/handler/index.js:353:259985
4:45:20 PM: Bundling of edge function failed
4:45:20 PM: ──────────────────────────────────────────────
4:45:20 PM: Error message
4:45:20 PM: Could not load edge function at '/opt/build/repo/.netlify/edge-functions/handler/index.js'. More on the Edge Functions API at https://ntl.fyi/edge-api.
4:45:20 PM: Error location
4:45:20 PM: While bundling edge function
How can I do to solve this problem?
It seems you must be using lottie/react-slick (or any other client side library) server side. Hence the document not defined error
I’m not familiar with Hydrogens rendering paradigm but you should be waiting until client load to then initialise any client libraries.
I’ve already tried everything I had in mind to only initialize them on the client side but nothing works, it still crashes at this stage. Just having an import no matter where and when show the same error with edge functions. A few month ago everything was fine even with these libraries. I really don’t understand why it suddenly stopped working at the beginning of May.
A client side library is requesting the DOM which a server will not have access to. If you look through the stack trace you should be able to find something that tells you where a bit of client side code shouldn’t be.
Like I said, this is probably not Netlify related but something to do with hydrogen/react.
Something you can do if you’re confident this has just recently started happening is go back through your deploys to find one without the error and compare git history from that point to now.
I’m pretty sure it’s to do with Netlify. I looked at all my commits, and no dependency or code changes on these parts between the last working version and now. Everything was working, then I took a month break on the project and I redeployed with an error on it with just some random style fixes that has nothing to do with the actual problem. I tried to wait for the client to be load but nothing worked, I can’t deploy with that. And if I try to deploy the last version that works for the deploy with react-slick, it now also fails. I really don’t know what to do.
I followed the proposed solution but it does not change the problem on Netlify. Whether the import is lazy or whether the component is in a ClientOnly/NoSsr does not change anything, an error occurs in the build for Edge. I’ve tested everything I can find to only load the component at the client level but Edge throws the same error all the time. Why is this code loaded in the build for Edge when I specify it’s a client-only component? I am using Netlify’s starter for Hydrogen but there is no indication how to avoid this kind of problem.
This is not caused by Netlify is all I can say. You can open an issue on Hydrogen end for investigation.