font-manager icon indicating copy to clipboard operation
font-manager copied to clipboard

Published 20 hours ago • verified publisher icon samuelmeuli

Currently incompatible with Nextjs/SSR

Open ljosberinn opened this issue 5 years ago • 4 comments
trafficstars

Hi,

thanks for this! Technically coming from font-picker-react, but the underlying issue is in here.

Currently, importing FontPicker imports font-manager, which imports loadFontPreviews, which imports dependencies from './font-styles/declarations.

When initially loading that file, it will instantly try append a style element to <head>.

Can probably be easily fixed by something like:

let previewFontsStylesheet: HTMLStyleElement;

/**
 * Add declaration for applying the specified preview font
 */
export function applyFontPreview(previewFont: Font, selectorSuffix: string): void {
	if(!previewFontsStylesheet && typeof document !== 'undefined') {
		previewFontsStylesheet = document.createElement('style');
		document.head.appendChild(previewFontsStylesheet);
	}

	const fontId = getFontId(previewFont.family);
	const style = `
			#font-button-${fontId}${selectorSuffix} {
				font-family: "${previewFont.family}";
			}
		`;
	previewFontsStylesheet.appendChild(document.createTextNode(style));
}

ljosberinn avatar Jun 04 '20 20:06 ljosberinn

Thanks for opening the issue! Would you be interested in creating a PR?

samuelmeuli avatar Jun 07 '20 07:06 samuelmeuli

Afraid not, I was just opening this on behalf of someone else

ljosberinn avatar Jul 04 '20 01:07 ljosberinn

One workaround for this is to avoid SSR like so:

import dynamic from "next/dynamic";

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

n3s7or avatar Apr 10 '21 02:04 n3s7or

I've opened a PR that fixes this issue

tested locally with nextjs + my own hook, based on the react lib https://gist.github.com/magicspon/7e9c7283240b9d8a093ff0ae29c07a25

magicspon avatar Mar 09 '22 19:03 magicspon