font-picker-react icon indicating copy to clipboard operation
font-picker-react copied to clipboard

Published 20 hours ago • verified publisher icon samuelmeuli

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

Open dixit-solanki opened this issue 5 years ago • 5 comments

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 avatar Jul 04 '20 12:07 dixit-solanki

plz help

dixit-solanki avatar Jul 04 '20 12:07 dixit-solanki

Same issue over here

zsoltmar avatar Sep 10 '20 00:09 zsoltmar

@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.

felipebrahm avatar Dec 01 '20 22:12 felipebrahm

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.

romarybi avatar Apr 02 '21 21:04 romarybi

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

MrOli3000 avatar Nov 06 '22 03:11 MrOli3000