Hi @Jshanks21, interesting.

When you say that it's a "dynamic route created when users upload videos", what do you mean? Do you have a page with dynamic routing (e.g., /pages/videos/[id].js) that uses getServerSideProps or getInitialProps to fetch the video? Similar to this page https://next-on.netlify.app/getServerSideProps/305 (view source code). That should definitely work!

Perhaps you can create either a minimal repo or at least share the relevant code snippets (i.e., what happens after video upload and what is the code for the page that should show the video)? If your work is open source, I am also happy to have a look at it directly.

We will definitely figure this out! 💪

Hey @Jshanks21, is this still relevant? I'm happy to help! ❤️

Otherwise, I'll close it for now (and we can reopen if need be).

Hi @FinnWoelm,

So sorry for the delay in my response! We were able to get it working again by switching from netlify to vercel. That said, your solution may also have solved our issue. But this was the quickest solution we were able to find at the time. I'm still fairly new to Next.js and joined this project after a lot of the server side stuff was already set up, so there are probably a lot of places we could be optimizing Next better. But we have some expectations for an MVP soon that have limited our time to do this.

The project is currently open-source and below is the commit tag from when we had next-on-netlify integrated:
https://github.com/FAMEGOODS/famegoods/tree/26b0be86757d59c2ce15ddb219dfef4e94c52259

There's kind of a lot going on in this repo atm 😅. But any feedback is greatly appreciated! Otherwise, we were able to troubleshoot the error by switching to vercel and I'm sure you're busy so feel free to close the issue.

Thank you in either case!

Hey @Jshanks21,

I'm sorry that it did not work on Netlify, but I'm glad you got it to work on Vercel 😊

I spent a few hours looking into it. The error actually occurs during next build — before next-on-netlify does anything. Errors during next build (with target serverless) are usually a hint that there is some problem related to your dependencies. When compiling for serverless, NextJS tries to turn every page into a Node function with all dependencies bundled into JavaScript. That can fail, for example, when a package has native dependencies.

After manually enabling and disabling the various package one by one, I was able to narrow the issue down to 3box. That's a client-only library, as far as I can tell (it seems to only work on the browser). I'm not super familiar with 3box, but this is my understanding after reading this article.

Anyway — we can work around that. We just need to take advantage of NextJS dynamic import to only load those packages on the client:

import dynamic from "next/dynamic";

const ClientOnlyComponent = dynamic(() => import("./ClientOnlyComponent"), { ssr: false });

export default function MyComponent() (
  <div>
    <ClientOnlyComponent />
  </div>
)

This works (I only did it for the Index page, for this example). You can see it here: https://issue34-famegoods.netlify.app/

Code: https://github.com/FinnWoelm/famegoods

This is the relevant commit: FinnWoelm/famegoods@577a97f

Unfortunately, this approach does require some refactoring in order to isolate and dynamically import all those components that rely on 3box. Given your time crunch, I agree with your decision to stick to Vercel for now! I'm going to close this for now, but if you want to switch at some later point, always happy to help! 🙂

Happy hacking and best of luck with that MVP 🔥