search

solidjs / solid-meta

Write meta tags to the document head
127 stars 16 forks source link

createUniqueId cannot be used under non-hydrating context #14

Open javiertury opened 2 years ago

javiertury commented 2 years ago

Vite prerender doesn't work, it throws createUniqueId cannot be used under non-hydrating context

https://github.com/solidjs/solid-meta/blob/4e7c6eb47daf55dacf12f200c16ca9bd69e90ae4/src/index.tsx#L174

Related to #13

ryansolid commented 2 years ago

Hmm... Vite prerender? Can you point me to a project. I get why this error happens. It means that it is being used in a location where there is no id is available, which means it couldn't generate it even if it wanted to. But I want to understand the use case because this more granular approach to hydrating the meta tags kind of depends on it.

javiertury commented 2 years ago

I'm fiddling with solidjs and vite to build a static page. My setup is based on this i18n recipe with pre-rendering.

Here is the example code of that recipe. I was trying to add solid-meta on top of that.

EDIT: And here is the base solidjs vite template.

ryansolid commented 2 years ago

Oh the vite-plugin-ssr project. Yeah, the tricky part is I'm unclear when they call their lifecycle hooks. The expectation is that the solid-meta tags are called during Solid's render which means they should be under a hydrating context unless they are specifically opted out like the Assets tag. Which makes me think more than likely the tags are being called in an unexpected place. That being said, we need to document SSR proper usage a bit better.

ryansolid commented 1 year ago

I did make a change here that might have helped. Worth checking with the latest Solid.

kkharji commented 1 year ago

Having similar issue. I'm trying to use a client library for rspc. However, I'm facing an error I couldn't quite fix:

Error: createUniqueId cannot be used under non-hydrating context
    at Proxy.createUniqueId (/frontend/node_modules/.pnpm/solid-js@1.5.6/node_modules/solid-js/dist/server.cjs:276:19)
    at MetaTag (/frontend/node_modules/@solidjs/meta/dist/index.jsx:123:15)
    at Meta (/frontend/node_modules/@solidjs/meta/dist/index.jsx:167:29)
    at Proxy.createComponent (/frontend/node_modules/solid-js/dist/server.cjs:283:15)
    at get children [as children] (/src/root.tsx:36:41)
    at /frontend/node_modules/solid-start/root/Document.tsx:26:17
    at resolveSSRNode (/frontend/node_modules/.pnpm/solid-js@1.5.6/node_modules/solid-js/web/dist/server.cjs:625:47)
    at Proxy.ssrElement (/frontend/node_modules/.pnpm/solid-js@1.5.6/node_modules/solid-js/web/dist/server.cjs:556:21)
    at Head (/frontend/node_modules/solid-start/root/Document.tsx:21:11)
    at Proxy.createComponent (/frontend/node_modules/solid-js/dist/server.cjs:283:15)
    at get children [as children] (/src/root.tsx:34:37)
    at Proxy.ssrElement (/frontend/node_modules/.pnpm/solid-js@1.5.6/node_modules/solid-js/web/dist/server.cjs:535:95)
    at Html (/frontend/node_modules/solid-start/root/Document.tsx:12:11)
    at Proxy.createComponent (/frontend/node_modules/solid-js/dist/server.cjs:283:15)
    at Root (/src/root.tsx:30:32)
    at Proxy.createComponent (/frontend/node_modules/solid-js/dist/server.cjs:283:

I'm trying to use a client library for rspc. Which makes use of