I am using Next js and typescript for my project, while including Reactflow on my webstie it shows errors.

Here is my source code:

import { Workflow } from "@prisma/client";
import React from "react";
import { ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";

import "@xyflow/react/dist/style.css";

function FlowEditor({ workflow }: { workflow: Workflow }) {

  const [nodes, setNodes, onChangeNodes] = useNodesState([]);
  const [edges, setEdges, onChangeEdges] = useEdgesState([]);


  return (
    <main className="h-full w-full">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onChangeNodes}
        onEdgesChange={onChangeEdges}
      >

      </ReactFlow>
    </main>
  );
}

export default FlowEditor;

The error shows on the localhost :

the error image

or

    Unhandled Runtime Error
    Error: (0 , _xyflow_react__WEBPACK_IMPORTED_MODULE_3__.useNodesState) is not a function or its return value is not iterable
Source
app\workflow\_components\FlowEditor.tsx (9:58) @ FlowEditor

    
           7 | function FlowEditor({ workflow }: { workflow: Workflow }) {
           8 |
        >  9 |   const [nodes, setNodes, onChangeNodes] = useNodesState([]);
             |                                                          ^
          10 |   const [edges, setEdges, onChangeEdges] = useEdgesState([]);

Im expecting solutions of my problem and perfectly use of the pakege @xyflow/react or a better pakege for this type of component

I am using Next js and typescript for my project, while including Reactflow on my webstie it shows errors.

Here is my source code:

import { Workflow } from "@prisma/client";
import React from "react";
import { ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";

import "@xyflow/react/dist/style.css";

function FlowEditor({ workflow }: { workflow: Workflow }) {

  const [nodes, setNodes, onChangeNodes] = useNodesState([]);
  const [edges, setEdges, onChangeEdges] = useEdgesState([]);


  return (
    <main className="h-full w-full">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onChangeNodes}
        onEdgesChange={onChangeEdges}
      >

      </ReactFlow>
    </main>
  );
}

export default FlowEditor;

The error shows on the localhost :

the error image

or

    Unhandled Runtime Error
    Error: (0 , _xyflow_react__WEBPACK_IMPORTED_MODULE_3__.useNodesState) is not a function or its return value is not iterable
Source
app\workflow\_components\FlowEditor.tsx (9:58) @ FlowEditor

    
           7 | function FlowEditor({ workflow }: { workflow: Workflow }) {
           8 |
        >  9 |   const [nodes, setNodes, onChangeNodes] = useNodesState([]);
             |                                                          ^
          10 |   const [edges, setEdges, onChangeEdges] = useEdgesState([]);

Im expecting solutions of my problem and perfectly use of the pakege @xyflow/react or a better pakege for this type of component

• reactjs
• next.js
• react-flow

1 Answer 1

add "use client"; on the top of the source code, this will fix the error

"use client";


import { Workflow } from "@prisma/client";
import React from "react";
import { ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";

import "@xyflow/react/dist/style.css";

function FlowEditor({ workflow }: { workflow: Workflow }) {

  const [nodes, setNodes, onChangeNodes] = useNodesState([]);
  const [edges, setEdges, onChangeEdges] = useEdgesState([]);


  return (
    <main className="h-full w-full">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onChangeNodes}
        onEdgesChange={onChangeEdges}
      >

      </ReactFlow>
    </main>
  );
}

export default FlowEditor;