Error: CodeBox Renderer: Cannot read properties of null (reading 'className')
Closed this issue · 1 comments
Ouzx commented
Describe the bug
When I put CodeBox block as data to Output object, I'm getting error like this:
Other features and components works well, but I couln't handle it.
To Reproduce
// data: just simple editorjs data that includes codebox
return <Output data={data} style={style} />;
Additional context
Also I can not change styling of CodeBox.
Call Stack
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'className')
Call Stack
<unknown>
https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js (2:7941)
Object.d [as highlightBlock]
https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js (2:8236)
eval
node_modules/editorjs-react-renderer/dist/index.min.js (1:37988)
eval
node_modules/editorjs-react-renderer/dist/index.min.js (1:38770)
React
commitHookEffectListMount
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26607:0)
commitHookPassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28610:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28863:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28913:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28943:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28943:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28943:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28797:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
Ouzx commented
I found a solution like this, it is working on my side but I'm not sure about infinite loop or performance issues.
// EditorJS-React-Renderer/tree/master/renderers/codeBox.tsx line: 125
const highlightBlock = useCallback(() => {
if (typeof (window as any).hljs !== "undefined") {
const codeElement = codeAreaRef.current;
if (codeElement && codeElement.className) {
(window as any).hljs.highlightBlock(codeElement);
}
} else setTimeout(highlightBlock, 250);
}, [codeAreaRef]);