Node 18.17.0 … while guide said Node 14.6 and above, Next.js required 18.17.0 and above.
Following instructions laid out here: Next.js + Markdown tutorial | Netlify Docs
Installs fine and sets up project ok. However it does not bring up the example site and thus can’t really progress very far in the guide. Any things that I could be missing?
PS C:\projects\pps2\tutorial-nextjs-files> npm run dev
> tutorial-nextjs-files@0.1.0 dev
> next dev
▲ Next.js 14.1.3
- Local: http://localhost:3000
✓ Ready in 2.9s
○ Compiling /[[...slug]] ...
✓ Compiled /[[...slug]] in 7.5s (270 modules)
TypeError: Cannot read properties of undefined (reading 'sections')
at ComposablePage (webpack-internal:///./pages/[[...slug]].jsx:43:25)
...
page: '/_next/static/webpack/2613fe27e9342498.webpack.hot-update.json'
}
22 | return (
23 | <div>
> 24 | {(page.sections || []).map((section, idx) => {
| ^
25 | const Component = componentMap[section.type];
26 | return <Component key={idx} {...section} />;
27 | })}
✓ Compiled /_error in 106ms (272 modules)
Looks like an issue with your code. page is undefined, you should try checking why.
Except it’s not my code, it’s the OOTB tutorial code.
Literally ran the --example setup script right before it.
And for reference, here is the script I ran, right before running npm run dev
npx create-stackbit-app@latest --example tutorial-nextjs-files
Based on the URL, looks like someone sent a request to that JSON file causing the issue.
Again, I’ve not supplied any custom code so not sure why it’s contacting that URL. And so glad it worked for you. yay.
But…
What’s your Node version? If I’m supposed to replicate what you did, I need to know details.
Node version
NPM version
Please gimme something other than, “it worked for me”.
Also, looks like you’re running this in a linux sub system first. i.e. wsl
Please try without doing so as the instructions do not dictate I need to be.
If that is a requirement, please provide details as to what linux subsytem you’re running it on and the details there in.
I do not believe this has anything to do with the environment, which is why I didn’t specify the details. It’s a bare-minimum Next.js application which worked for the devs working on it (across different environments).
But to answer your specific questions, I’m using Node 20.11.1, NPM 10.5.0. Regarding WSL, I do all of my development work in WSL and I don’t have Node.js installed on Windows. I am not keen to install it in Windows either. Regardless, WSL is likely not part of the solution here.
Regarding the problem, I tried to search a bit more and found: Page keeps refreshing: “Fast Refresh had to perform a full reload.” · Issue #43398 · vercel/next.js (github.com), hot-update.json 404 (Not Found) · Issue #1385 · webpack/webpack-dev-server (github.com), Next.js 13.4.1 get 404 for webpack.hot-update.json - Stack Overflow. There are more such issues across the internet.
All in all, even if this is an issue, this is more of a Next.js issue than Netlify. You’re running into issues running a Next.js local dev server. The only thing that relates to Netlify here is that you downloaded a template shared publicly. If Next.js behaves different on different systems, unfortunately that’s not something we can debug. The “page” that Next.js reports to be causing an issue is never supposed to be a page. It detects it as a page for some reason, tries to use the code in the template and thus fails.
I appreciate the information re node versions and corresponding links. Unfortunately still unable to get the system to run properly. I will try again in the future. Or will investigate another starter set that I can test this out on.
