styled-components fails in Facebook and TikTok browser #5144

marianzburlea · 2023-01-19T10:03:54Z

What version of Remix are you using?

1.11.0

Steps to Reproduce

run npx create-remix@latest project-name
select: basic, typescript, netlify and n so we can run yarn
run yarn add styled-components
run yarn add -D @types/styled-components
create a basic styled component

import styled from 'styled-components'

const H1 = styled.h1`
  border: 1px solid red;
`

export default function Index() {
  return (
    <div>
      <H1>test</H1>
    </div>
  )
}

update entry.server.tsx with:

import { renderToString } from "react-dom/server";
import { RemixServer } from "@remix-run/react";
import type { EntryContext } from "@remix-run/node"; // or cloudflare/deno
import { ServerStyleSheet } from "styled-components";

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const sheet = new ServerStyleSheet();

  let markup = renderToString(
    sheet.collectStyles(
      <RemixServer
        context={remixContext}
        url={request.url}
      />
    )
  );
  const styles = sheet.getStyleTags();
  markup = markup.replace("__STYLES__", styles);

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

inside root.tsx file update the head tag to include styles:

    <head>
        <Meta />
        <Links />
        {typeof document === "undefined"
          ? "__STYLES__"
          : null}
    </head>

and deploy to netlify.

Here is an example project that replicates the issue:
https://github.com/marianzburlea/test-sc

and here is an example of the styled component receiving a red border.
https://steady-pixie-99fc00.netlify.app/

Expected Behavior

actual styles to be displayed

Actual Behavior

hydration fails and no styles are applied, when I click on a link from Facebook and Tiktok.

The BIG problem is not facebook messenger, it's how people that click paid ads see the website.

This is the same way users that click on an ad, end up on the website, with no styles.

The text was updated successfully, but these errors were encountered:

Xiphe · 2023-01-20T22:07:28Z

Im experiencing similar issues outside of the context you describe.

Basically any hydration error where react is forced to rebuild the <head> will cause the styles of styled-components to be removed. While react itself recovers from this state, styled-components fails to do so.

As mentioned in #5159 I'd say this is not per se a remix bug but an architectural incompatibility as the issue can be reproduced with any react app failing to hydrate the whole document and might also happen to other libraries that inject things into the DOM.

ref: styled-components/styled-components#3924

Xiphe · 2023-01-23T09:51:02Z

related issue in react: facebook/react#24430

Xiphe · 2023-01-23T12:04:01Z

I was able to work around the problem by:

downgrading to react@17
ensuring that {typeof document === "undefined" ? "__STYLES__" : null} is rendered at the very end of the <head>

Would still love to use latest react features within my app.

clgeoio · 2023-01-24T05:03:00Z

+1 to this issue - Kent has responded to this issue here, stating that it is a React issue, which I think is fair enough, but I'm not sure if or when the React team would be doing anything about it.

There's a potential workaround, but it's not great - you can render Remix not at the document level, but within a <div> in the body.
By wrapping in an HTML container you can solve this issue, however it comes at the cost of not being able to use <Meta> or <Links> (mostly).
You can somewhat work around this, only sending Links and Meta on the server render and forgoing meta and link changes on the client routing.

entry.client.tsx:

import { RemixBrowser } from '@remix-run/react';
import { hydrateRoot } from 'react-dom/client';

hydrateRoot(document.getElementById('root')!, <RemixBrowser />);

entry.server.tsx (an example using React 18 streams):

import { ServerRoot } from './root.server';

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
) {
  const stream = await renderToReadableStream(
    <ServerRoot
      location={remixContext.staticHandlerContext.location}
      loaderData={remixContext.staticHandlerContext.loaderData}
      routeModules={remixContext.routeModules}
      matches={remixContext.staticHandlerContext.matches}
    >
      <RemixServer context={remixContext} url={request.url} />
    </ServerRoot>,
  );

  return new Response(stream, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

ServerRoot.tsx:

const ServerRoot = ({
  children,
  ...rest
}) => {
  return (
    <html lang="en">
      <head>
        <V1Meta {...rest} />
      </head>
      <body>
        <div id="root">
          {children}
        </div>
      </body>
    </html>
  );
};

Where V1Meta is the Meta component from Remix, but takes the params from props rather than hooks (as the context is not created yet)

The root.tsx does not contain any <html> tags and doesn't play allow any information in the head to be changed client-side.

Xiphe · 2023-01-24T08:27:34Z

Thanks for sharing. I was also tinkering around with rendering the remix app into a sub-element of the page but gave up because it caused too many things I love about remix to stop working.

As with the "who's problem is this": Yeah the issue lays between React and Styled Components. But Remix on the one hand made the architectural decision to work on the whole document which surfaces the problem and on the other hand advertises styled-components to work in remix apps (which it does but at the cost of react@18).

clgeoio · 2023-01-24T23:31:45Z

I have created a proposal / discussion for this issue #5244 - give it an upvote!

Xiphe · 2023-02-02T11:15:50Z

@kiliman figured out how to do this with the current tools and for me it solves the styled-components issues: #5244 (comment)

kiliman · 2023-02-02T16:04:14Z

@Xiphe awesome... glad it resolved the styled-components issue for you.

github-actions · 2023-04-19T02:21:26Z

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

github-actions · 2023-04-26T04:07:57Z

This issue has been automatically closed because we didn't hear anything from the original author after the previous notice.

marianzburlea added the bug:unverified label Jan 19, 2023

marianzburlea changed the title ~~styled-components fails in Facebook browser~~ styled-components fails in Facebook and TikTok browser Jan 19, 2023

machour mentioned this issue Jan 20, 2023

Remix + Styled Components practicably not production ready #5159

Closed

clgeoio mentioned this issue Jan 24, 2023

Styled Components Injects Class Names in Wrong positions when rendering with SSR / Remix #4907

Closed

machour added the hydration label Jan 24, 2023

github-actions bot added the needs-response We need a response from the original author about this issue/PR label Apr 19, 2023

github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 26, 2023

MichaelDeBoey removed the needs-response We need a response from the original author about this issue/PR label Apr 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

styled-components fails in Facebook and TikTok browser #5144

styled-components fails in Facebook and TikTok browser #5144

marianzburlea commented Jan 19, 2023 •

edited by machour

Loading

Xiphe commented Jan 20, 2023 •

edited

Loading

Xiphe commented Jan 23, 2023

Xiphe commented Jan 23, 2023 •

edited

Loading

clgeoio commented Jan 24, 2023 •

edited

Loading

Xiphe commented Jan 24, 2023 •

edited

Loading

clgeoio commented Jan 24, 2023 •

edited

Loading

Xiphe commented Feb 2, 2023

kiliman commented Feb 2, 2023

github-actions bot commented Apr 19, 2023

github-actions bot commented Apr 26, 2023

styled-components fails in Facebook and TikTok browser #5144

styled-components fails in Facebook and TikTok browser #5144

Comments

marianzburlea commented Jan 19, 2023 • edited by machour Loading

What version of Remix are you using?

Steps to Reproduce

Expected Behavior

Actual Behavior

Xiphe commented Jan 20, 2023 • edited Loading

Xiphe commented Jan 23, 2023

Xiphe commented Jan 23, 2023 • edited Loading

clgeoio commented Jan 24, 2023 • edited Loading

Xiphe commented Jan 24, 2023 • edited Loading

clgeoio commented Jan 24, 2023 • edited Loading

Xiphe commented Feb 2, 2023

kiliman commented Feb 2, 2023

github-actions bot commented Apr 19, 2023

github-actions bot commented Apr 26, 2023

marianzburlea commented Jan 19, 2023 •

edited by machour

Loading

Xiphe commented Jan 20, 2023 •

edited

Loading

Xiphe commented Jan 23, 2023 •

edited

Loading

clgeoio commented Jan 24, 2023 •

edited

Loading

Xiphe commented Jan 24, 2023 •

edited

Loading

clgeoio commented Jan 24, 2023 •

edited

Loading