Custom nodes = custom component

[nimbit-software]

Hi guys,

first of all nice job on the editor. I am looking forward to using its in all sorts of projects.

We are currently looking into using this for a pipeline where we would need to create a number of custom nodes some and/or nodes even some state notes to hold the state of the previous data passed through. I realize that the custom nodes is still new and i am more then willing to help with development/documention of thoese nodes since we plan to be using them as well as making our nodes available (if you are interested).

Currently im trying to define a new node and i saw the render node function and assumed it is used to render something like a react flow custom node.

  createJdmNode({
            kind: "pingNode",
            icon: <PlayCircle size={50} />,
            color: "red",
            displayName: "Ping",
            group: "ping",
            shortDescription: "Used for ping",
            handleLeft: true,
            handleRight: true,
            renderNode: ({data,id,selected,specification}) => {
              return  <>
          <Handle
                type="target"
                position={Position.Left}
                style={{ background: '#555' }}
                onConnect={(params) => console.log('handle onConnect', params)}
                isConnectable={true}
              />
              <div className="w-[250px] h-[250px] border-amber-400 border bg-white text-black">
               <span> Custom Color Picker Node: <strong>{data?.color}</strong></span>
             
              <input className="nodrag" type="color" onChange={data?.onChange} defaultValue={data?.color} />
              </div>
            </>
            }  
          }),

However when i do i get an error

Error: [React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001

Is there a ways to render my own component as a custom node OR can i create a custom editor like the table/expression editor and have it used by the node? that would already solve most of my use cases.

thanks in advance.

[stefan-gorules]

This issue seems to be caused by multiple versions of reactflow and/or zustand. The issue is detailed here: https://reactflow.dev/error#001. You may also use dedupe functionality inside vite, or resolve.alias inside webpack. Some package managers such as pnpm also allow for overrides: https://pnpm.io/package_json#pnpmoverrides.

[nsherred]

I know this is an old issue, but I ran into the same problem. For anyone else who comes across this, just use the same version of reactflow that jdm-editor is using. At this time it is "reactflow": "11.11.4".