hashicon
hashicon copied to clipboard
Rendering error: ReferenceError: document is not defined
Rendering error: ReferenceError: document is not defined
at createCanvas (/home/username/app/node_modules/@emeraldpay/hashicon/lib/utils.js:36:18)
at Object.renderer [as default] (/home/username/app/node_modules/@emeraldpay/hashicon/lib/renderer.js:31:18)
at Object.hashicon (/home/username/app/node_modules/@emeraldpay/hashicon/lib/index.js:53:33)
at Hashicon.render (/home/username/app/node_modules/@emeraldpay/hashicon-react/lib/component.js:51:31)
at /home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:796:21
at measureLifeCyclePerf (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:795:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:822:32)
at ReactCompositeComponentWrapper.performInitialMount (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:362:30)
at ReactCompositeComponentWrapper.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactCompositeComponentWrapper.performInitialMount (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
at ReactCompositeComponentWrapper.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactCompositeComponentWrapper.performInitialMount (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
at ReactCompositeComponentWrapper.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactDOMComponent.mountChildren (/home/username/app/node_modules/react-dom/lib/ReactMultiChild.js:238:44)
at ReactDOMComponent._createContentMarkup (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:653:32)
at ReactDOMComponent.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:520:29)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactDOMComponent.mountChildren (/home/username/app/node_modules/react-dom/lib/ReactMultiChild.js:238:44)
at ReactDOMComponent._createContentMarkup (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:653:32)
at ReactDOMComponent.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:520:29)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactDOMComponent.mountChildren (/home/username/app/node_modules/react-dom/lib/ReactMultiChild.js:238:44)
at ReactDOMComponent._createContentMarkup (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:653:32)
at ReactDOMComponent.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:520:29) ReferenceError: document is not defined
at createCanvas (/home/username/app/node_modules/@emeraldpay/hashicon/lib/utils.js:36:18)
at Object.renderer [as default] (/home/username/app/node_modules/@emeraldpay/hashicon/lib/renderer.js:31:18)
at Object.hashicon (/home/username/app/node_modules/@emeraldpay/hashicon/lib/index.js:53:33)
at Hashicon.render (/home/username/app/node_modules/@emeraldpay/hashicon-react/lib/component.js:51:31)
at /home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:796:21
at measureLifeCyclePerf (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:795:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:822:32)
at ReactCompositeComponentWrapper.performInitialMount (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:362:30)
at ReactCompositeComponentWrapper.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactCompositeComponentWrapper.performInitialMount (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
at ReactCompositeComponentWrapper.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactCompositeComponentWrapper.performInitialMount (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
at ReactCompositeComponentWrapper.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactDOMComponent.mountChildren (/home/username/app/node_modules/react-dom/lib/ReactMultiChild.js:238:44)
at ReactDOMComponent._createContentMarkup (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:653:32)
at ReactDOMComponent.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:520:29)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactDOMComponent.mountChildren (/home/username/app/node_modules/react-dom/lib/ReactMultiChild.js:238:44)
at ReactDOMComponent._createContentMarkup (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:653:32)
at ReactDOMComponent.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:520:29)
at Object.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactDOMComponent.mountChildren (/home/username/app/node_modules/react-dom/lib/ReactMultiChild.js:238:44)
at ReactDOMComponent._createContentMarkup (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:653:32)
at ReactDOMComponent.mountComponent (/home/username/app/node_modules/react-dom/lib/ReactDOMComponent.js:520:29)
In next.js i had the same issue, so i used hashicon in a function component with useEffect
import React, { useEffect, useRef, ImgHTMLAttributes } from "react";
import { Params, hashicon, HasherType } from "@emeraldpay/hashicon";
export interface Props {
value: string;
size?: number;
hasher?: HasherType;
options?: Params;
style?: React.CSSProperties;
className?: string;
onClick?: React.MouseEventHandler<HTMLImageElement>;
}
const Hashicon: React.FC<Props> = (props) => {
const ref = useRef<ImgHTMLAttributes<HTMLImageElement>>({});
useEffect(() => {
(() => {
let attributes: ImgHTMLAttributes<HTMLImageElement> = {};
let options = {};
if (typeof options !== "undefined") {
options = { ...options, ...props.options };
}
if (typeof props.size === "number") {
options = { ...options, ...{ size: props.size } };
}
if (typeof props.hasher === "string") {
options = { ...options, ...{ hasher: props.hasher } };
}
const icon = hashicon(props.value, options).toDataURL();
ref.current = {
...attributes,
alt: props.value,
width: props.size,
src: icon,
};
})();
}, [props]);
return (
<img
{...ref.current}
onClick={props.onClick}
className={props.className}
style={props.style}
/>
);
};
export default Hashicon;