Styled components (Deno is not defined at _arch)

[NicoZweifel]

I was messing around with different component libraries and CSS Frameworks in deno/fresh and tried to add styled components to a new project.

I used the plugin system (although my impl is very limited and more context options would probably improve this significantly).

export default function styledComponents(): Plugin {
 return {
    name: "styled-components",
    render: (ctx) => {
      ctx.render()
      const sheet = new ServerStyleSheet();
      try {
      renderToString(
       sheet.collectStyles(
       <>
        <Home/>
        <Greet 
            url={new URL("localhost.com:8000")}
            route="test"
            params={{}} 
            data={"test"}/>  
        </>)
      );
      const styleTags = sheet.getStyleTags();
      const doc = new DOMParser().parseFromString(styleTags, "text/html");
      if(doc == null) return {
        styles: []
      }
      const matches : string [] = [...doc.querySelectorAll('style')]
        .map(style => style.textContent)
        .filter(x => x != null && x.length > 0)
        .map( x=> x as string);
      return {
        styles: matches.map(x => {
          return {
            cssText: x,
            id: '___STYLED'
          }
        })
      }
      } catch (error) {
        console.error(error);
      } finally {
        sheet.seal();
      }
      return {
        styles: []
      }
    }
 }
}

The SSR seems okay:

But the hydrate function is missing still and not sure how to implement it yet. I have uploaded a demo project at: https://github.com/NicoZweifel/fresh-styled-components

[NicoZweifel]

After some more research I am still encountering this error on the client side:

Uncaught ReferenceError: Deno is not defined at _arch (process.ts:13:3) at process.ts:23:21 _arch @ process.ts:13 (anonymous) @ process.ts:23

Could this be related to a broken Plugin or is this a bug somewhere else? The Hydrate/main.ts function is never called.

[UrielCh]

I have the same issue today ...

it looks to occur if use: import { render } from "https://deno.land/x/gfm@0.1.26/mod.ts"; in an island.

....

should that work ? is gfm is too large and should only by used in SSR ?

[NicoZweifel]

Yea it seems like that it is caused by code that is supposed to be server only exposed to the client. I'll probably dig some more in the coming days when I find some time.