How to use subscriptions with Next.js appDir (I'm using client components)

[sneko]

Hi,

I'm aware Next.js appDir is not supported officially (#3297), but for more than 12 months I'm using it with tRPC by only using client components and it works great.

Since yesterday I'm trying to use a subscription but I see no websocket logs into my browser. So I retried from scratch with https://github.com/trpc/examples-next-prisma-websockets-starter/ which works great with the old pages way, and as soon as I make a modification to convert the about page to the appDir logic... That's the same than in my project, no network activity for websocket whereas it can work for queries and mutations.

Since it uses react-query like for queries/mutations I was not expecting any difference...?

Curious if any of you has a solution? cc @KATT

For those interested about modifications I made sneko/examples-next-prisma-websockets-starter@72666d4 . To test:

pnpm i
pnpm dx
// then go to http://localhost:3000/about and see network activity, none.

Thank you,

[sneko]

I'm a damn idiot. I was too focused on the network section in the browser and didn't see in the console section there was an error about security policy...

Refused to connect to 'ws://localhost:3001/' because it violates the following Content Security Policy directive: "connect-src 'self'".

Just needed to add the exact ws://localhost:3001/ to my connect-src rule (with ending slash), and it works now. Hope it helps 👍