search

samuelmeuli / font-picker-react

✏️ Font selector component for Google Fonts
https://font-picker.samuelmeuli.com
MIT License
153 stars 71 forks source link

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

Open dixit-solanki opened 4 years ago

dixit-solanki commented 4 years ago

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 commented 4 years ago

plz help

zsoltmar commented 4 years ago

Same issue over here

felipebrahm commented 3 years ago

@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 commented 3 years ago

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 commented 2 years ago

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"));