Always execute the <Metadata> component on the client

[cannikin]

Right now in an RSC app if you use <Metadata> in a page or other component rendered on the server, the serve process dies with the error:

12:34:13 PM [vite] Error when evaluating SSR module /@fs/Users/rob/Sites/rsc/cambium-rsc/web/dist/rsc/assets/index-DqR_YzqW.mjs:
|- TypeError: React3.createContext is not a function
    at eval (/Users/rob/Sites/rsc/cambium-rsc/web/dist/rsc/assets/index-DqR_YzqW.mjs:42731:22)
    at async instantiateModule (file:///Users/rob/Sites/rsc/cambium-rsc/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:54897:9)

node:events:496
      throw er; // Unhandled 'error' event
      ^

TypeError: React3.createContext is not a function
    at eval (/Users/rob/Sites/rsc/cambium-rsc/web/dist/rsc/assets/index-DqR_YzqW.mjs:42731:22)
    at async instantiateModule (file:///Users/rob/Sites/rsc/cambium-rsc/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:54897:9)
Emitted 'error' event on PassThrough instance at:
    at emitErrorNT (node:internal/streams/destroy:169:8)
    at emitErrorCloseNT (node:internal/streams/destroy:128:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

Node.js v20.11.1
------------------------------------------------------------------------------------------------------------------------
Error: Command failed with exit code 1: yarn rw-serve-fe
    at makeError (/Users/rob/Sites/rsc/cambium-rsc/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/Users/rob/Sites/rsc/cambium-rsc/node_modules/execa/index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 1)
    at async bothSsrRscServerHandler (/Users/rob/Sites/rsc/cambium-rsc/node_modules/@redwoodjs/cli/dist/commands/serveBothHandler.js:76:3)
    at async Object.handler (/Users/rob/Sites/rsc/cambium-rsc/node_modules/@redwoodjs/cli/dist/commands/serve.js:47:9)
    at async runYargs (/Users/rob/Sites/rsc/cambium-rsc/node_modules/@redwoodjs/cli/dist/index.js:191:3)
    at async /Users/rob/Sites/rsc/cambium-rsc/node_modules/@redwoodjs/cli/dist/index.js:137:7
    at async main (/Users/rob/Sites/rsc/cambium-rsc/node_modules/@redwoodjs/cli/dist/index.js:115:3)

Tobbe suggested that something in <Metadata> or possibly Helmet is doing createContext internally, an so all of this code can only run on the client. The solution is to simply add 'use client' to the top of the Metadata.ts file.

[Tobbe]

Actually trying this code I get an error like

Error [RollupError]: src/pages/AboutPage/AboutPage.tsx (6:9): "Metadata" is not exported by "../node_modules/@redwoodjs/web/dist/components/Metadata.js", imported by "src/pages/AboutPage/AboutPage.tsx".
file: /Users/tobbe/tmp/rw-rsc-metadata/web/src/pages/AboutPage/AboutPage.tsx:6:9

It's interesting that it says that it's not exported, because looking at the file I clearly see this

I suspect, but have not been able to verify yet, that this is a CJS vs ESM issue

[cannikin]

Yep I saw that same thing after adding 'use client' and then importing directly from dist.

[Tobbe]

Looking into this a bit more, it actually does look like it's us that are using context. Metadata imports PortalHead which imports ServerInject, and ServerInject uses context. So that's probably where we should add use client.

Or, maybe the real solution is to have two versions of Metadata, one that's to be used in server components and one for client components. But that might be getting ahead of ourselves a little bit 😅

[Tobbe]

With all the other changes that have happened since this PR was opened this now works!

And putting 'use client' in Metadata.tsx is exactly the right place. It imports react-helmet-sync which internally uses context. And it's not specifying 'use client'. So we have to.

[cannikin]

If React 19 can move <meta> tags into the head automatically, maybe we don't need to use react-helmet-sync anymore?