examples
examples copied to clipboard
remix-run
Followed Remix / Stitches Example and getting FOUC
What version of Remix are you using?
1.1.3
Steps to Reproduce
Visit https://california-custom-tile.netlify.app/ and notice shift of logo due to FOUC. I applied example project found here and am unable to resolve the flash of unstyled content. I originally followed this tutorial as it was the only writing I could find at the time tying Stitches and Remix together.
Here's all the relevant changes I made following the example.
Expected Behavior
Logo should NOT shift from left side to center from a flash of unstyled content (FOUC). Logo should be centered on load
Actual Behavior
Logo shifts from left side to right because of FOUC.
In your HTML I can see your empty style tag:
<style id="stitches"></style>
You have two options:
- Do a double
renderToStringof theRemixServercomponent inentry.server.tsx. The first render doesn't get used, but it allows Stitches to collect all the styles to inject in the second render. - After your
renderToStringinentry.server.tsx, replace the empty style tag HTML with a new style tag that contains the results ofgetCssText(), as shown here.
Thanks @tshddx - I tried the second option without any success. Any examples of the first option? Tried it, but want to ensure I'm rendering twice correctly. I'll try to link to a branch later today.
Here's a link to the second method where I'm still getting FOUC: https://github.com/coreybruyere/california-custom-tile/pull/2
I followed the guide and also got FOUC. the server does render some styles. but not the styles used in my Container and Title component added in the Index. On client it goes ok. On server it has following html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="noindex" name="robots" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700;900&family=Montserrat:wght@400;500;600;700;800;900&display=swap" />
<style id="stitches">
--sxs {
--sxs: 0 t-ioutRf
}
@media {
:root,
.t-ioutRf {
--colors-thaicello: #97e367;
--colors-limoncello: #fee62e;
--fonts-montserrat: 'Montserrat', sans-serif
}
}
--sxs {
--sxs: 1 ZocxG
}
@media {
body {
margin: 0;
padding: 0
}
}
</style>
</head>
<body>
<div class="c-eWbzaK"><img src="/build/_assets/thaicello-logo-QMORX73B.png" alt="" class="c-fDIUPu" />
<h1 class="c-fciIaC">Coming soon: Thaicello</h1>
</div>
Which does not contain c-eWbzaK for example
https://github.com/daphnesmit/thaicello for reproduction visually at : https://thaicello.netlify.app/
I am almost thinking maybe its because of the Netlify setup I use. EDIT: yep if I use the remix app server or the --template stitches it works...
Will investigate a but further with an empty netlify setup and copy pasting again and compare versions of pkgs. EDIT2: weirdly enough in a new copy pasted setup it does work... no idea what the difference is.
SOLUTION: Note to myself and others: don't forget to import styled from: import { styled } from "../styles/stitches.config";
@daphnesmit what do you mean by --template? I haven't been able to fix this FOUC issue - as seen here: (https://california-custom-tile.netlify.app/). My latest attempt at a fix can be found here: https://github.com/coreybruyere/california-custom-tile/pull/2
I already did a fresh copy paste and there it worked. Dont really know what what the issue was. you're repo is probably private because I get a 404.
I managed to get it to work. The thing that I find interesting is that both the example from Stitches & the example from Remix work but they are both different: stitches: https://github.com/jjenzz/remix-stitches/blob/main/app/entry.client.tsx remix example: https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/stitches?file=/app/entry.client.tsx
The difference is the provider + context; In remix example they do a reset on the client. I am wondering if that is needed or not: https://codesandbox.io/s/github/remix-run/remix/tree/main/examples/stitches?file=/app/root.tsx
@daphnesmit I made my repo public. Saw your repo was private too. To get yours working did you follow the stitches example or the remix example? Going to try fixing later today. I couldn't get the codesandbox examples working.
@coreybruyere its is working i probably made a dumb mistake. Just wondering why they are both different. I made mine private again indeed
SOLUTION: Note to myself and others: don't forget to import styled from:
import { styled } from "../styles/stitches.config";
Thank you sir! 🎉
Just for reference as it's not really visible at the moment, Stitches seems to be in maintenance only mode and won't get new features according to https://www.modulz.app/blog/modulz-acquired-by-workos
Has anyone used stitches while using renderToPipeableStream? How am I able to replace something in a stream 🤔
You might be able to use a PassThrough and a Transform but I think there might be various ways of taking it all the way, one might be to buffer to memory cause don't know if you can give stitches stream chunks 🤷♂️
entry.server.tsx
import { PassThrough, Transform } from "stream";
import { renderToPipeableStream } from "react-dom/server";
import { RemixServer } from "@remix-run/react";
import { type EntryContext, type Headers, Response } from "@remix-run/node";
import isbot from "isbot";
const ABORT_DELAY = 5000;
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
) {
const callbackName = isbot(request.headers.get("user-agent")) ? "onAllReady" : "onShellReady";
return new Promise((resolve, reject) => {
let didError = false;
const { pipe, abort } = renderToPipeableStream(
<RemixServer context={remixContext} url={request.url} />,
{
[callbackName]() {
let body = new PassThrough();
const transformStream = new Transform({
transform(chunk, encoding, callback) {
console.log("entry.server", chunk.toString());
callback(null, chunk);
},
});
responseHeaders.set("Content-Type", "text/html");
responseHeaders.set("Transfer-Encoding", "chunked");
responseHeaders.set("Connection", "keep-alive");
resolve(
new Response(body, {
status: didError ? 500 : responseStatusCode,
headers: responseHeaders,
}),
);
pipe(transformStream).pipe(body);
},
onShellError(err) {
reject(err);
},
onError(error) {
didError = true;
console.error(error);
},
},
);
setTimeout(abort, ABORT_DELAY);
});
}
FYI Stitches has largely been abandoned by original contributors and development has dramatically slowed down. I've moved back to SCSS for projects but have my eyes on vanilla-extract.
@coreybruyere did you see that we just added an example for vanilla extract? 👀
I only experience FOUC with devtools open in firefox. If it's closed, FOUC goes away. In chorme, the font is a little jumpy with dev tools open but no flash. Nothing with devtools closed.
I came across this also using Streaming + Remix + Tailwind. No idea if related, but I also noticed that it does a FOUC when devtools are open (Chrome).
@richardanewman Good catch, when I close the dev tools there's no more FOUC
