[examples] MUI is missing style when navigating back from error page in remix example #30436

unlinking · 2021-12-29T10:23:35Z

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

MUI is missing style when back from error page in remix.

Expected behavior 🤔

Right style show

Steps to reproduce 🕹

Steps:

Visit https://n5o0j-3000.sse.codesandbox.io
Click 404 page button
Click back button in browser

sandbox: https://codesandbox.io/s/awesome-voice-n5o0j

Context 🔦

It seems that styleData not reset after back from error page, this action happens only in browser not having a request to server to rerender html.

Your environment 🌎

System:
OS: Windows 10 10.0.22000
Binaries:
Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files\nodejs\yarn.CMD
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.62)
npmPackages:
@emotion/react: latest => 11.7.1
@emotion/styled: latest => 11.6.0
@mui/base: 5.0.0-alpha.62
@mui/material: latest => 5.2.6
@mui/private-theming: 5.2.3
@mui/styled-engine: 5.2.6
@mui/system: 5.2.6
@mui/types: 7.1.0
@mui/utils: 5.2.3
@types/react: latest => 17.0.38
react: latest => 17.0.2
react-dom: latest => 17.0.2
typescript: latest => 4.5.4

memoriesadrift · 2021-12-30T12:39:45Z

I encountered the same bug using Next.js, so it doesn't seem to be limited to Remix.

lvauvillier · 2021-12-30T15:29:55Z

Same bug here. I was about to post the exact same repro.

lvauvillier · 2021-12-30T16:16:14Z

On the client, styleData is null.
If the Document component is rerendered, all the styles are lost.

Here is a workaround: pass data from server to client using a __STYLE_DATA_ global variable:

let styleData = useContext(StylesContext);

if (!styleData && typeof window !== "undefined") {
  styleData = (window as any)?.__STYLE_DATA__ as StyleContextData[] | null;
}

And

{styleData && (
   <script dangerouslySetInnerHTML={{ __html: `window.__STYLE_DATA__ = ${JSON.stringify(styleData)}` }} />
)}

This is a link to a working sample using this technique:
https://codesandbox.io/s/optimistic-cherry-dsyr5

⚠️ Edit: This technique don't work if new styles are added later navigating new pages.
See also: remix-run/remix#1136 and remix-run/remix#852

lvauvillier · 2021-12-31T10:35:53Z

I spend some time digging into this subject, and here is my understanding and how I finally solved it.
@mnajdova I'll be delighted to have your feedback on this solution

Context

Emotion, dynamically injects <style> tags in the page on demand. With Remix, error pages contain a new full html document. And when it renders it creates a mess:

All tags injected previously are lost
Emotion cache is now linked to a removed <head> tag: new tags cannot be injected
Global styles have also refs linked to removed elements, we need to update all refs

Solution

Re-inject tags and re-link to current `<head>` tag:

const Document = withEmotionCache(({ children, title }: DocumentProps, emotionCache) => {
  // Only executed on client
  React.useEffect(() => {
    // re-link sheet container
    emotionCache.sheet.container = document.head
    // re-inject tags
    const tags = emotionCache.sheet.tags;
    emotionCache.sheet.flush();
    tags.forEach(tag => {
      (emotionCache.sheet as any)._insertTag(tag);
    });
  }, []);

  return (
    <html lang="en">
      ...
    </html>
  );
});

Global styles

Global styles uses a ref to keep track on they markup. The only way to make it working is to trigger a rehydration.
Since cache is used as dependency of the rehydration side effect function, we can reset it to make it work.

Wrap client CacheProvider to add a reset function:

// ./src/ClientStyleContext.tsx

import { createContext } from 'react';

export interface ClientStyleContextData {
  reset: () => void;
}

export default createContext<ClientStyleContextData>({
  reset: () => {}
});

// entry.client.tsx

interface ClientCacheProviderProps {
  children: React.ReactNode;
}

function ClientCacheProvider({ children }: ClientCacheProviderProps) {
  const [cache, setCache] = useState(createEmotionCache());

  function reset() {
    setCache(createEmotionCache());
  }

  return (
    <ClientStyleContext.Provider
      value={{ reset }}
    >
      <CacheProvider value={cache}>
        {children}
      </CacheProvider>
    </ClientStyleContext.Provider>
  ); 
}

hydrate(
  <ClientCacheProvider>
    <ThemeProvider theme={theme}>
      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
      <CssBaseline />
      <RemixBrowser />
    </ThemeProvider>
  </ClientCacheProvider>,
  document,
);

// root.tsx
const Document = withEmotionCache(({ children, title }: DocumentProps, emotionCache) => {
  const clientStyleData = useContext(ClientStyleContext);

  // Only executed on client
  React.useEffect(() => {
    [...]
    // reset cache to reapply global styles
    clientStyleData.reset();
  }, []);

  [...]
}

I renamed StylesContext to ServerStyleContext to be consistant with ClientStyleContext

Updated sample:
https://codesandbox.io/s/ecstatic-shockley-jnuby

jansedlon · 2022-01-01T20:44:33Z

@lvauvillier It actually works 🤯 Good job!

unlinking · 2022-01-05T09:32:32Z

@lvauvillier It helps a lot, thanks!

mbrookes · 2022-01-05T20:11:17Z

Reopening for inclusion in the Remix example.

mnajdova · 2022-01-11T09:52:57Z

@lvauvillier I was on vacation, I've just seen your comment. Let me test it and verify that it works, and I will update the Remix example.

mnajdova · 2022-01-12T15:49:57Z

@lvauvillier I've created #30592 based on your codesandbox. The only problem I could notice is the flickering when going from 404 to a valid page. I think it's coming from the GlobalStyles.

Note that I've updated in the meantime the example project to not require double rendering (see remix-run/remix#1325, seems like the example don't he remix docs will be updated too).

I will look into the flickering next, it's important for us to fix it before we release this.

BTW I could notice the flickering on your sandbox too, so I don't think it's related to the changes with the double rendering.

mnajdova · 2022-01-12T16:04:49Z

@lvauvillier never mind, I fixed it by replacing the useEffect in the Document with useLayoutEffect. I can't spot any issues anymore. Well done!

lvauvillier · 2022-01-12T23:44:54Z

@mnajdova yeah! I also iterate around useLayoutEffect but it is not recommended to use in component rendered server side. We get an explicit warning.

mnajdova · 2022-01-13T06:01:47Z

@lvauvillier right, we can use the useEnhancedEffect (unstable_useEnhancedEffect) from @mui/material :)

nojitsi · 2023-03-23T13:29:27Z

It's been not so easy to figure out, but solution and example helped a lot. I think now my app works even better then before:)

unlinking added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 29, 2021

unlinking changed the title ~~MUI is missing style when back from error page~~ MUI is missing style when back from error page in remix Dec 29, 2021

hbjORbj assigned mnajdova Dec 29, 2021

mbrookes changed the title ~~MUI is missing style when back from error page in remix~~ [examples] MUI is missing style when navigating back from error page in remix example Dec 29, 2021

mbrookes added the examples Relating to /examples label Dec 29, 2021

This comment has been minimized.

Sign in to view

mbrookes removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 29, 2021

This comment has been minimized.

Sign in to view

primos63 mentioned this issue Jan 1, 2022

Get Chakra UI working with Remix Run chakra-ui/chakra-ui#5166

Closed

3 tasks

This was referenced Jan 1, 2022

[Bug]: CSS-in-JS is unable to style the error/catch handling component remix-run/remix#852

Closed

[Feature]: Add different css frameworks for create-remix app remix-run/remix#579

Closed

unlinking closed this as completed Jan 5, 2022

mbrookes reopened this Jan 5, 2022

mnajdova mentioned this issue Jan 12, 2022

[docs] Update remix example to restore from error pages #30592

Merged

mnajdova closed this as completed in #30592 Jan 20, 2022

Vashiru mentioned this issue Apr 26, 2022

[Bug]: Errors with Styled Components SSR remix-run/remix#1032

Closed

amir-ziaei mentioned this issue Jun 14, 2022

Styles lost after using browser back button amir-ziaei/iBuddy#4

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[examples] MUI is missing style when navigating back from error page in remix example #30436

[examples] MUI is missing style when navigating back from error page in remix example #30436

unlinking commented Dec 29, 2021 •

edited by mbrookes

Loading

This comment has been minimized.

This comment has been minimized.

memoriesadrift commented Dec 30, 2021

lvauvillier commented Dec 30, 2021

lvauvillier commented Dec 30, 2021 •

edited

Loading

lvauvillier commented Dec 31, 2021 •

edited

Loading

jansedlon commented Jan 1, 2022

unlinking commented Jan 5, 2022

mbrookes commented Jan 5, 2022

mnajdova commented Jan 11, 2022

mnajdova commented Jan 12, 2022 •

edited

Loading

mnajdova commented Jan 12, 2022

lvauvillier commented Jan 12, 2022

mnajdova commented Jan 13, 2022

nojitsi commented Mar 23, 2023 •

edited

Loading

[examples] MUI is missing style when navigating back from error page in remix example #30436

[examples] MUI is missing style when navigating back from error page in remix example #30436

Comments

unlinking commented Dec 29, 2021 • edited by mbrookes Loading

Duplicates

Latest version

Current behavior 😯

Expected behavior 🤔

Steps to reproduce 🕹

Context 🔦

Your environment 🌎

This comment has been minimized.

This comment has been minimized.

memoriesadrift commented Dec 30, 2021

lvauvillier commented Dec 30, 2021

lvauvillier commented Dec 30, 2021 • edited Loading

lvauvillier commented Dec 31, 2021 • edited Loading

Context

Solution

Re-inject tags and re-link to current <head> tag:

Global styles

jansedlon commented Jan 1, 2022

unlinking commented Jan 5, 2022

mbrookes commented Jan 5, 2022

mnajdova commented Jan 11, 2022

mnajdova commented Jan 12, 2022 • edited Loading

mnajdova commented Jan 12, 2022

lvauvillier commented Jan 12, 2022

mnajdova commented Jan 13, 2022

nojitsi commented Mar 23, 2023 • edited Loading

unlinking commented Dec 29, 2021 •

edited by mbrookes

Loading

lvauvillier commented Dec 30, 2021 •

edited

Loading

lvauvillier commented Dec 31, 2021 •

edited

Loading

Re-inject tags and re-link to current `<head>` tag:

mnajdova commented Jan 12, 2022 •

edited

Loading

nojitsi commented Mar 23, 2023 •

edited

Loading