after install npm its wok in client side but getting error in server side like . ReferenceError: document is not defined

[dixit-solanki]

ReferenceError: document is not defined
at /Users/shopcratshopcrat/Documents/Dixit/React/Apcrat Projects/shoppiko/admin/node_modules/@samuelmeuli/font-manager/dist/index.js:164:34
at __assign (/Users/shopcratshopcrat/Documents/Dixit/React/Apcrat Projects/shoppiko/admin/node_modules/@samuelmeuli/font-manager/dist/index.js:2:68)
at Object. (/Users/shopcratshopcrat/Documents/Dixit/React/Apcrat Projects/shoppiko/admin/node_modules/@samuelmeuli/font-manager/dist/index.js:5:2)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Module._compile (/Users/shopcratshopcrat/Documents/Dixit/React/Apcrat Projects/shoppiko/admin/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Object.newLoader [as .js] (/Users/shopcratshopcrat/Documents/Dixit/React/Apcrat Projects/shoppiko/admin/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)

[dixit-solanki]

plz help

[zsoltmar]

Same issue over here

[felipebrahm]

@ReactRambo You should disable SSR (server side rendering) for this component. For example, if you're using next.js, you'd import this module like this:

import dynamic from 'next/dynamic';

const FontPicker = dynamic(() => import('font-picker-react'), { ssr: false });

Then you can use <FontPicker ... /> like any other React component.

[romarybi]

A bit late but the way I fix it is go into node_modules, find this library and in index.es.js/index.js change

   var previewFontsStylesheet = document.createElement("style");
   document.head.appendChild(previewFontsStylesheet);

to

if(typeof document !== 'undefined'){
    var previewFontsStylesheet = document.createElement("style");
    document.head.appendChild(previewFontsStylesheet);
}

Would be great if the library itself had this implemented.

[MrOli3000]

For use with react ES6 I used:

//import FontPicker from "font-picker-react";
import loadable from "@loadable/component";
const FontPicker = loadable(() => import("font-picker-react"));