remix: [Bug]: Errors with Styled Components SSR

Chat me on Whatsapp+2347026260392

On Mon, May 9, 2022, 7:39 PM Elijah Trillionz @.***> wrote:

@alexkuz https://github.com/alexkuz I am having issues installing esbuild-styled-components https://github.com/lukalabs/lukalabs-npm/tree/main/packages/esbuild-styled-components. It keeps throwing npm errors. Should I paste the error logs here or create an issue on the package repo?

— Reply to this email directly, view it on GitHub https://github.com/remix-run/remix/issues/1032#issuecomment-1121445294, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZCCBUQKWRXF7LF2ABU7CMDVJFLVJANCNFSM5J72OP6Q . You are receiving this because you are subscribed to this thread.Message ID: @.***>

I’ve published my plugin, try it out:

https://github.com/lukalabs/lukalabs-npm/tree/main/packages/esbuild-inject-plugin https://github.com/lukalabs/lukalabs-npm/tree/main/packages/esbuild-styled-components

If you have any issues please let me know.

@prxg22 fyi

Still no solution for this? @numso I tried following the example you shared but I still get the same error. and besides, it’s no different from what I already have in mine.

And I think before they work on styled-components supporting SSR without the babel-plugin they should work on making the babel-plugin work in remix.

Because in next.js there it’s just an easy setup with .babelrc, but it’s not the case in remix. I don’t know if it’s already possible in remix some other way, but I have searched all around but no solution.

And the error I get is something like Warning: Prop 'className' did not match. Server: "sc-fFeiMQ chKvQT" Client: "sc-gsDKAQ fVbgCo"

add babel-plugin-styled-components as dev dependency. add customer babel.config.js like blow module.exports = { presets: [ "@remix-run/core/babel", ], plugins: [ [ "babel-plugin-styled-components", { "ssr": true } ] ] }; this work for me

I have a somewhat working solution for hydration issue, although I’m not ready to make it public yet. It monkey-patches Remix’s esbuild to add a custom plugin which then uses tree-sitter (a fast code parser that supports TS) to parse the source and add component config, same way as styled-components/macro does. For now it only supports styled.tag and styled(...) (which are the most common usecases I believe). Gonna test it more and share it later.

The styled-components example that was recently added to the dev branch worked well for me: https://github.com/remix-run/remix/tree/1576615c0bdb6222bcddf0ffefe19d2335169299/examples/styled-components

The hydration warning is still present. It looks like the plan is for styled-components to support SSR without needing the babel-plugin. That’s being tracked here: https://github.com/styled-components/styled-components/issues/3660

@prxg22 just realized there was css missing in your example, that’s why it didn’t work for me:

const Nav = styled.nav(({ isMenuOpen }) => css`
...

@AIEPhoenix Your suggestion has zero effect for me. Looking through the source and then finding this closed issue for implementing being able to do this seems to backs up it is not implemented? Issue #36

Ultimately it is what is needed though so that class names stay consist across the server and client.

https://styled-components.com/docs/advanced#tooling-setup

In order to reliably perform server side rendering and have the client side bundle pick up without issues, you’ll need to use our babel plugin. It prevents checksum mismatches by adding a deterministic ID to each styled component.

I’m sure enabling us to use/configure Babel would help a lot of people with a lot of issues 😄

I know Remix do not want to “lock in” to things (so they can swap out esbuild later if needed etc) but there’s so many tools we can’t use as things stand now 😓 (#717)

I appreciate and like their take too with how they recommend to do styling (and I have really had a good go at doing it that way!) but at work I work day in day out with styled-components so that’s where my mind and workflow is most efficient.

Sorry, @alexkuz, my bad 😅

@Elijah-trillionz as I said, it was not a fix on the remix app. We are using an ui component lib, which is built using babel. I just add the following line to its babel.config.json:

module.exports = {
 ...,
 plugins: [
    ...,
    ['babel-plugin-styled-components', { ssr: true, namespace: 'some_namespace' }],
  ],
}

@prxg22 I could publish it this weekend I think, it works for us so far. It would be helpful to look at your example to see if it would help in your case.

I am getting this from a fresh remix install, not CSS or anything added to it.

Running into similar problems. Hopefully a solution can be found soon, as styled component support is a must for me!