zachleat/fontfaceonload

Breaks in SSR

mvasin opened this issue · 1 comments

mvasin commented

The library breaks when used in a server-side rendered app. The build breaks with ReferenceError: window is not defined error, and a check typeof window === 'undefined' && ... unfortunately doesn't help.

verydanny commented

You should turn the lib into a string and serve it with your SSR app. I'm assuming you're using something like React here.

Something like so:

import fontFaceOnLoad from 'fontfaceonload'
import { renderToString } from 'react-dom/server'
import { html } from 'common-tags'

const app = renderToString(<App/>)

const html = html`
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script type="application/javascript">
        ${fontFaceOnLoad}
      </script>
  </head>
  <body>
    <div id="app-root">${app}</div>
  </body>
  </html>
`