examples/next: fix unstyled flash

[jordanoverbye]

Hello 👋

This PR attempts to fix #270

So I don't think it's possible to create a theme-ui-next plugin as we have to do things that plugins aren't able to do (like wrapping the App in a ThemeProvider). So instead I have done something else:

1. Extract the noflash function in gatsby-plugin-theme-ui into its own function that theme-ui exports called applyColorModeFromLocalStorage.
2. Update the next example to use light/dark mode and also use the applyColorModeFromLocalStorage which prevents the unstyled flash.

[jxnblk]

Thanks for looking into this! I wonder if it might make more sense from an API standpoint to make this a component, since this and gatsby-ssr.js both use a script element

[jordanoverbye]

Yeah that's a good idea! I was thinking that after I submitted this PR. The reason I didn't do that is because in gatsby-ssr.js it's using a js function and not JSX. But I will update

[jletey]

@jxnblk @jordanoverbye When I run your code ... I get a module not found error for @emotion/core

After installing it, everything works fine!

[jordanoverbye]

@johnletey good pickup! I'll fix that.

[jordanoverbye]

Hey @jxnblk , do you mind taking another look at this please? Also, I'm not 100% on the name ApplyColorModeFromLocalStorage...

[jxnblk]

As far as names go, what about

Suggested change

	export const ApplyColorModeFromLocalStorage = () => (
	export const InitializeColorMode = () => (

[jxnblk]

This is looking great! Not sure about what would make most sense for the component name, but other than that this seems great! We can add docs for Next.js usage after this is merged in

[jordanoverbye]

Thanks @jxnblk , I've just updated those changes

[jletey]

@jordanoverbye @jxnblk When I use the newest update _document.js, I get the following error:

at Object.renderToHTML (/Users/john/Desktop/learn-anything/node_modules/next-server/dist/server/render.js:277:16) name: 'Invariant Violation', framesToPop: 1 }
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at _document.js:16.
    in MyDocument
    in Context.Provider

[jordanoverbye]

Hey @johnletey

So because this example lives outside the /packages folder, we have to manually link the latest version of theme-ui into examples/next.

I think the problem you are seeing is because haven't done this step and we have added a new API which doesn't exist in the current version of theme-ui.

cd ~/path/to/theme-ui/packages/theme-ui
yarn prepare
yarn link
cd ../../examples/next 
yarn link "theme-ui"
yarn dev

Let me know if that fixes it for you.

[jletey]

No @jordanoverbye ... I'm literally just copying-n-pasting your code into a different Next.js project that I'm working on and I need Theme UI for, and the newest changes to _document.js cause errors when running the site

[jordanoverbye]

Hey @johnletey

Oh right that makes sense - but the error you are seeing is caused by the same thing though. In your NextJS project you have theme-ui installed via NPM. The latest version of theme-ui on NPM does not export the component InitializeColorMode which I have introduced in this PR. So it will fail when it tries to render something that doesn't exist.

What you can do for now is just copy the source code of InitializeColorMode and paste it into _document.js. Then, once this PR is merged in you can upgrade your theme-ui package and remove this hack.

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
// import { InitializeColorMode } from 'theme-ui'

// Remove this once this PR is merged
const InitializeColorMode = () => (
  <script
    key="theme-ui-no-flash"
    dangerouslySetInnerHTML={{
      __html: `(function() { try {
        var mode = localStorage.getItem('theme-ui-color-mode');
        if (!mode) return
        document.body.classList.add('theme-ui-' + mode);
      } catch (e) {} })();`,
    }}
  />
)

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return initialProps
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <InitializeColorMode />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

[jletey]

Wonderful ... thank you so much @jordanoverbye

Now I don't have an unstyled flash!

[jxnblk]

@jordanoverbye Thanks for working on this, this looks great!