This code works perfectly every second refresh in Chrome. The other time it complains about the target not being a dom node. Any suggestions as to why it consistently fail on every second refresh?
This is a Redwood project using BPMN-JS and it is the createPortal to "asidecontent" that is the culprit
import React, { useEffect, useRef } from 'react'
import BpmnModeler from 'bpmn-js/lib/Modeler'
import { BpmnPropertiesPanelModule } from 'bpmn-js-properties-panel'
import { BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel'
import { createPortal } from 'react-dom'
import { Head } from '@redwoodjs/web'
interface BpmnEditorProps {
filePath: string
}
const BpmnTest: React.FC<BpmnEditorProps> = ({ filePath }) => {
const containerRef = useRef<HTMLDivElement>(null)
const modelerRef = useRef<BpmnModeler | null>(null)
useEffect(() => {
const container = containerRef.current
if (!container) return
// Check if modeler is already mounted and unmount it if required
if (modelerRef.current) {
modelerRef.current.destroy()
modelerRef.current = null
}
// Create a new instance of the modeler
const modeler = new BpmnModeler({
container,
propertiesPanel: {
parent: '#bpmn-properties-panel',
},
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
],
})
modelerRef.current = modeler
const loadBpmnDiagram = async () => {
try {
const response = await fetch(filePath)
const xml = await response.text()
modeler.importXML(xml, (err: any) => {
if (err) {
console.error('Error rendering BPMN diagram:', err)
} else {
console.log('BPMN diagram rendered successfully.')
// Open properties panel initially
const canvas = modeler.get('canvas')
canvas.zoom('fit-viewport')
}
})
} catch (error) {
console.error('Error loading BPMN diagram:', error)
}
}
loadBpmnDiagram()
// Cleanup
return () => {
if (modelerRef.current) {
modelerRef.current.destroy()
modelerRef.current = null
}
}
}, [filePath])
const sidebarcontent = document.getElementById('asidecontent')
return (
<>
<Head>
<link rel="stylesheet" href="/app.css" />
<link rel="stylesheet" href="/bpmn-js.css" />
<link rel="stylesheet" href="/diagram-js.css" />
<link rel="stylesheet" href="/bpmn-embedded.css" />
</Head>
<div ref={containerRef} style={{ height: '100vh' }} />
{sidebarcontent !== null &&
createPortal(
<div id="bpmn-properties-panel" style={{ height: '100%' }} />,
sidebarcontent
)}
</>
)
}
export default BpmnTest
I have tried several methods to verify that the div with asidecontent is found before doing the create portal call but they all fail or are inconsequential - including the one in the example code.