question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

with-turbopack occasionally throws "Error during SSR rendering - timed out waiting for the Node.js process to connect" when navigating pages

See original GitHub issue

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Using Windows 10 with WSL2:

    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
    Binaries:
      Node: 16.17.1
      npm: 8.15.0
      Yarn: N/A
      pnpm: 7.14.0
    Relevant packages:
      next: 13.0.0
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

Which example does this report relate to?

with-turbopack

What browser are you using? (if relevant)

Firefox 107.0b4

How are you deploying your application? (if relevant)

No response

Describe the Bug

The new with-turbopack example occasionally throws during dev:

error - [rendering] [root of the dev server]/[CURRENT ROUTE TRYING TO RENDER]
  Error during SSR Rendering
  timed out waiting for the Node.js process to connect

Most of the time the page does end up rendering successfully and an event - updated in _xxx_ms gets logged, but on some occasions it throws the above error in the console while still rendering the page. I can still navigate to other pages, but the console stops logging events. This can happen on all pages when I navigate to them.

Sometimes the error blocks the entire page from rendering by throwing an error in the browser, although this only occurred twice: image

I cannot figure out a pattern that causes this error, the pages load fine most of the time but occasionally throw this error unexpectedly.

Expected Behavior

On navigating, a page should render without errors, echoing an event to the console with the amount of time it took to update.

To Reproduce

  1. Create a new project using the example.
pnpm create next-app --ts --example with-turbopack
  1. Run the dev command (--turbo is included in the dev script by default in this example.)
pnpm run dev
  1. Go to http://localhost:3000 in the browser and click the links in the sidebar to navigate to different pages. 3.a. Pay attention to the console as the error might be thrown even though the page rendered.
  2. After some successful navigation events this error might be thrown (multiple times if you continue navigating): image 4.a On some occasions the error can be thrown in the browser as well, preventing the page from rendering.

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:13
  • Comments:24

github_iconTop GitHub Comments

4reactions
YunosukeYoshinocommented, Nov 1, 2022

16.18.0 worked for windows! Does not work with M1 MAC

2reactions
nickbuckhamcommented, Oct 27, 2022

Switching from node14 to node16 fixed this for me.

using nvm

nvm use 16

Read more comments on GitHub >

github_iconTop Results From Across the Web

When an error occurs in React SSR, what kind of response ...
What I want to make happen. Let's say you've implemented SSR in express and React and an error is thrown during rendering.
Read more >
How To Avoid SSR Load Issues in Node.js - NodeSource
At this stage, this application is better off delegating rendering to the browser for scaling. Making things worse. SSR performance issues ...
Read more >
Angular universal Web App with SSR randomly slow (15s per ...
Hi,. We are trying to publish an SSR (Server side rendering) Angular App on an Azure Web App running on Node 14.
Read more >
Server-Side Rendering (SSR) - Vue.js
js is a framework for building client-side applications. By default, Vue components produce and manipulate DOM in the browser as output. However, it...
Read more >
React Server Side Rendering With Node And Express
use HTML files, sometimes ones that already existed, to enhance the application with dynamic functionality; not worry about the minutiae of ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found