Next.js: Fabric CSS + Next.js document is not defined

Created on 6 Apr 2017 · 12Comments · Source: vercel/next.js

I using Fabric React by Microsoft in my Next.js application. For first time load I got document is not defined, but for 2 or maybe 3 times I try to reload that pages it works. How it can be? How can I solve this problem, so I never see document is not defined everytime I restart my server.

Source

rohmanhm

👍3

Most helpful comment

How can I handle document not defined in next.js?

rohmanhm on 7 Apr 2017

👍5

All 12 comments

Could you provide an repo with example?

aranajhonny on 6 Apr 2017

not a nextjs issue. please look here: https://github.com/OfficeDev/office-ui-fabric-react/issues/616

luisrudge on 6 Apr 2017

👍1

@aranajhonny here's my repo https://github.com/rohmanhm/nextjs-fabric
when you run npm run dev for first time it will throw an error document not defined but if you load the page it will passed without any errors.

rohmanhm on 7 Apr 2017

@luisrudge I'm not sure, so why it's just throw an error when I open my page for first time load after restart my server?

rohmanhm on 7 Apr 2017

Not sure. what I'm sure is that you have to follow the lib's instructions to make it work with SSR

luisrudge on 7 Apr 2017

First, take a look my repo https://github.com/rohmanhm/nextjs-fabric
I followed all instructions in here https://github.com/OfficeDev/office-ui-fabric-react#rendering-fabric-components-on-the-server-ssr

I just confused about this line

import * as React from 'react';
import * as ReactDOMServer from 'react-dom/server';
import { Button } from 'office-ui-fabric-react/lib/Button'; 

let body = ReactDOMServer.renderToString(<Button>hello</Button>);

console.log(
  `
  <html>
  <head>
    <style>${ _allStyles}</style>
  </head>
  <body>
    ${ body}
  </body>
  </html>
  `);

How I can implement renderToString in nextjs

rohmanhm on 7 Apr 2017

It happens that the SSR is not working, I am reviewing your example.

aranajhonny on 7 Apr 2017

Turn off javascript in the browser, and you'll see it does not work.

aranajhonny on 7 Apr 2017

I think for now this will not work with next.js there are many things incompatible with ssr.

aranajhonny on 7 Apr 2017

How can I handle document not defined in next.js?

rohmanhm on 7 Apr 2017

👍5

Probably works when you use dynamic imports in next@beta https://github.com/zeit/next.js#dynamic-import