[Turbopack] WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed

[blopez2010]

What version of Turbopack are you using?

default for next 13

What package manager are you using / does the bug impact?

pnpm

What operating system are you using?

Mac

Describe the Bug

Adding the --turbo on the package.json/scripts/dev value throws the error in the browser console.

Expected Behavior

shouldn't throw any error in the browser console.

To Reproduce

1. Create a monorepo with Turborepo.
2. Locale the package.json within the web app.
3. Add --turbo at the end of "dev": "next dev --turbo"
4. Add a new folder named app
5. Create a page.tsx (working with Javascript throws the same error)
6. Add a layout.tsx file.
7. run pnpm dev on the terminal.
8. Open the Browser and go to http://localhost:3000.
9. Open the devtools, the error should be printed like:
10. Removing the --turbo in the dev script, the browser console error goes away.

Reproduction Repo

https://github.com/blopez2010/my-turborepo

[jridgewell]

Turbopack's dev server is not compatible with the builds produced by webpack. You may have a cached JS file or something that is continuing to make requests.

https://github.com/vercel/turbo/blob/56039940cdfac07b68e030da1396214962e99ceb/crates/turbopack-dev-server/src/lib.rs#L200-L209

[blopez2010]

Hey, @jridgewell thanks for answering. I did it and it didn't work.

I use Blisk for development and after closing the app and reopening it again, the same error is shown. Now in the terminal I'm noticing a message I haven't seen before (after restarting my laptop)

web:dev: for everyone.
web:dev: 
web:dev: Learn more about Next.js v13 and Turbopack: https://nextjs.link/with-turbopack
web:dev: Please direct feedback to: https://nextjs.link/turbopack-feedback
web:dev: 
web:dev: ready - started server on 0.0.0.0:3000, url: http://localhost:3000
web:dev: event - initial compilation 51ms
web:dev: event - updated in 2439ms
web:dev: [404] /_next/webpack-hmr (WebSocket)
web:dev: A non-turbopack next.js client is trying to connect.
web:dev: Make sure to reload/close any browser window which has been opened without --turbo.
web:dev: event - updated in 1560ms
web:dev: error - [resolve] ... [1 paths] are hidden, run with --show-all to show them
web:dev: warning - [parse] ... [1 paths] are hidden, run with --show-all to show them
web:dev: [404] /favicon.ico (3049ms)
web:dev: event - updated in 3049ms
web:dev: event - updated in 191ms
web:dev: event - updated in 0.185ms
web:dev: event - updated in 437ms
web:dev: event - updated in 0.033ms
web:dev: [404] /_next/webpack-hmr (WebSocket)
web:dev: A non-turbopack next.js client is trying to connect.
web:dev: Make sure to reload/close any browser window which has been opened without --turbo.
web:dev: [404] /favicon.ico (0.349ms)
web:dev: event - updated in 228ms
web:dev: event - updated in 8.95ms
web:dev: [404] /favicon.ico (0.452ms)
web:dev: event - updated in 394ms
web:dev: [404] /_next/webpack-hmr (WebSocket)
web:dev: A non-turbopack next.js client is trying to connect.
web:dev: Make sure to reload/close any browser window which has been opened without --turbo.
web:dev: event - updated in 174ms
web:dev: event - updated in 25ms

Am I missing something?

One thing to add; when I created the monorepo, the nextjs version in the package.json was the v12 and I manually upgrade to the v13 (removing the node_modules and npm i)

[kwonoj]

This seems due to new appdir adds dev overlay installs hmr socket

(https://github.com/vercel/next.js/blob/9bf811eea0028dcc4f74070e8a98c5d11da97d41/packages/next/client/components/react-dev-overlay/internal/helpers/use-websocket.ts#L25)

We'll probably need to update dev overlay to aware --turbo to suppress connection / or disable overlay itself.

[typeofweb]

It's curious this bug doesn't occur outside of a monorepo setup. I can reproduce it in an almost-empty turborepo:

1. npx create-turbo@latest turbopack-bug
2. Update next to canary
3. Enable experimental.appDir: true in apps/web/next.config.js
4. Delete apps/web/pages
5. Add apps/web/app/page.tsx with export default function() { return <div>Hello</div>; }
6. Run next dev --turbo
7. Observe the bug:

[barthicus]

Can confirm @mmiszy 's words. I wanted to play with the new Next.js appDir and next dev --turbo mode but it failed on basic setup with monorepo. It works fine only in the old next dev mode. Fresh install, no cache. I use pnpm btw.

[useafterfree]

I got this yesterday when working with multiple next projects. I solved it by issuing a 'killall node' and then restarting.

[0xS4D]

If you delete "turbo.json" in the monorepo, webpack hmr don't load.

[hunghvu]

It's curious this bug doesn't occur outside of a monorepo setup. I can reproduce it in an almost-empty turborepo:

1. `npx create-turbo@latest turbopack-bug`

2. Update `next` to `canary`

3. Enable `experimental.appDir: true` in `apps/web/next.config.js`

4. Delete `apps/web/pages`

5. Add `apps/web/app/page.tsx` with `export default function() { return <div>Hello</div>; }`

6. Run `next dev --turbo`

7. Observe the bug:

Can confirm. HMR is not working while this error happens, meaning I need to F5 the page to reflect the changes. This happens even on a clean installation with turborepo (no cache, nothing)..

web:dev: [404] /_next/webpack-hmr (WebSocket)
web:dev: A non-turbopack next.js client is trying to connect.
web:dev: Make sure to reload/close any browser window which has been opened without --turbo.

[timmeade]

I have hit this hard also.

[desire]

+1

[naeri-kailash]

+1

[ljq0226]

+1

[mikebuilds]

+1

[mikebuilds]

After a lot of investigation tonight, I've concluded that this issue is definitely caused by the use of PNPM.

I believe (I could be wrong, I don't write Rust) the part of Turbopack that uses HMR to fetch and update code, doesn't resolve symlinks - which is inadvertently causing the error code above.

I really don't have a great suggestion at the moment to resolve the issue then switching back to NPM. You can use NPM just in the nextjs directory but you'll need to watch out for differences in workspace package declarations.

On a side note I also discovered that Next.js is doing some work already to detect the use of turborepo by looking for turbo.json. I'm hopeful one of the library authors can give us an update about this one.

[mikebuilds]

Actually some more info. switching your project back to NPM won't work either as it hoists its packages when using workspaces.. shame!

It's wild, but I don't think there is actually a way to use turbopack in turborepo (or a monorepo) right now.

Will have to wait for the underlying issue to be addressed.

@jaredpalmer @sokra @padmaia appreciate your help here.

[padmaia]

@sokra is currently looking into this

[Anishali2]

A non-turbopack next.js client is trying to connect.

I solved this issue opening localhost in a single tab of the browser and closed all the tabs containing localhost in there URL Also try starting the server again using with --turbo flag