stephen koch

software engineer

Netlify and Next.js ... play nicely

tl;dr: now works because I was frustrated -- update at the end

Luke and I have our weekly 1:1 and he points out a bug with this site: when CMD + clicking a link (or going directly to a link) that is fetching data, and specifically data that uses the URL for the query, the page results in a 500 error.

Test it for yourself by going to this link.

See? Five-hundo. :sad-panda:

The perplexing part is that locally, this isn't an issue (such a classic engineer statement, I know.)

Let the debug begin

First thing to do is fire up the site locally to see if it's happening there.

Nope, everything is fine.

Second thing to do is to update all dependencies. Yep, I'm a few weeks behind on Next.js and all the things therein so perhaps there is a fix there.

Nope, again we are all good locally.

Well shit, now what

The search begins and I start with Netlify. Is there an issue with how the site is built and then subsequently served? I start by recognizing that while working locally I am using next dev and that this isn't how it's done on Netlify. Looking through some issues on Netlify, I'm not finding much that's recent enough to allow me to hone in on the problem.

I then shift gears and look into the Netlify CLI commands and how to build and test locally. After building and serving the site via Netlify CLI (and not Next.js CLI) I'm approaching what users would experience.

Now we're getting somewhere

I can now reproduce the same issue locally which (a) gives me confidence and (b) tells me that this is a Netlify issue and not a Next.js issue.

This is very helpful in that I can search for ERR_PACKAGE_PATH_NOT_EXPORTED with some modifiers (next, vercel, netlify, etc) to finally start to dial in on my predicament.

I think I've found something

A few searches later I end up at this GitHub issue which was opened on May 3, 2023. Two weeks ago (at the time of this writing.)

Reading through, I come to the end which is -- checks notes -- three hours ago.

Jackpot?

Since this is fresh, I'm still unsure of the proper fix. Apparently, Netlify doesn't like ENV vars that are prefixed with an underscore, thus the current "fix" will not work.

__NEXT_PRIVATE_PREBUNDLEDREACT=next

Not that I've tested this but I trust that it's true.

It would seem that this has been merged to the latest canary build and will now make its way to another release soon? I'm a little fuzzy w/r/t the release/deploy strategy.

Update to this post imminent.

To conclude

The depth of knowledge that we, as frontend engineers, possess continues to astound me. The ability to debug issues is an acquired skill that matures as you progress along your own journey. It continues to amaze me that we, the software engineers of the world, constantly evolve, grow, and learn new technologies in an ever growing landscape.

We truly are wizards, Harry.

Update

:happy-panda: -- it works. After chiming in on the GitHub issue where I'd landed, I have suspicions that this is uniquely a Netlify issue. I once again updated a few dependencies that have recently been released thinking that maybe that would work however it wasn't true.

For full transparency on my debugging, I built the site using the netlify cli and then served that build locally. In doing so, I was consistently met with the following error:

◈ Rewrote URL to /.netlify/functions/___netlify-handler
Request from ::1: GET /.netlify/functions/___netlify-handler
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './server.edge' is not defined by "exports" in /Users/skoch/projects/koch.dev/.netlify/functions-serve/.unzipped/___netlify-handler/node_modules/react-dom/package.json
    at new NodeError (node:internal/errors:399:5)
    at exportsNotFound (node:internal/modules/esm/resolve:261:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:591:9)
    at resolveExports (node:internal/modules/cjs/loader:569:36)
    at Module._findPath (node:internal/modules/cjs/loader:643:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1068:27)
    at /Users/skoch/projects/koch.dev/.netlify/functions-serve/.unzipped/___netlify-handler/node_modules/next/dist/server/require-hook.js:180:36
    at Module._load (node:internal/modules/cjs/loader:928:27)
    at Module.require (node:internal/modules/cjs/loader:1149:19)
    at require (node:internal/modules/helpers:121:18) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
[GET] /testing-netlify-next (SSR)
Response with status 500 in 68 ms.

To circumvent, I was able to add __NEXT_PRIVATE_PREBUNDLED_REACT=next to my .env.local file and when I built/served the site everything worked. This "hack" was found in this discussion where I also chimed in where it seems that the team is aware of the issue and is working on it.

The issue, though, is that we can't add this "type" of ENV var because:

3:13:45 PM: Failed during stage 'building site': 
Environment variable key '__NEXT_PRIVATE_PREBUNDLED_REACT' 
must start with a letter

So in a state of frustration, last night I moved the site to Vercel.

¯\_(ツ)_/¯

I feel conflicted about this because (a) now I won't be able to follow up on the timing of the fix (because I don't have to) and (b) if this were an issue with a client site we wouldn't necessarily just be able to switch providers like that.

But development can be like that sometimes. In the end, it's a win for me personally because I've had to (once again) go through the process of updating some DNS records and (once again) experience Vercel's developer experience. It's changed so much, just like Netlify, over the years and now I have a reason to re-familiarize myself.

Like seeing an old friend again.