NextJS error when importing SmartEdge and SmartEdgeProvider

[AnhHuy02]

In NextJS 12.1.0, I used React Flow v10 with SmartEdge v0.5.0, and tried to import like your document

import ReactFlow, {
  addEdge,
  Background,
  useNodesState,
  useEdgesState,
  MiniMap,
  Controls,
  Node,
} from "react-flow-renderer";
import { SmartEdge, SmartEdgeProvider } from "@tisoap/react-flow-smart-edge";

//.......................

const edgeTypes = {
  smart: SmartEdge,
};

//.......................

const WorkflowContainer = () => {
  //..........................

  return (
      <SmartEdgeProvider options={{ debounceTime: 300 }}>
        <ReactFlow
          className="react-flow-subflows-example"
          nodes={nodes}
          edges={edges}
          onNodeMouseEnter={(
            event: MouseEvent<Element, globalThis.MouseEvent>,
            node: Node<any>
          ) => {
            handleNodeMouseEnter(event, node);
          }}
          // onNodeDragStop
          onNodesChange={onNodesChange}
          onEdgesChange={onEdgesChange}
          nodeTypes={nodeTypes}
          edgeTypes={edgeTypes}
          // onConnect={onConnect}
          fitView
        >
          <MiniMap />
          <Controls />
          <Background />
        </ReactFlow>
      </SmartEdgeProvider>
  );
};

export default WorkflowContainer;

But the browser showed the error:

Error: require() of ES Module D:\digi-curriculum\digi-curriculum-frontend\node_modules\react-flow-renderer\dist\esm\index.js from D:\digi-curriculum\digi-curriculum-frontend\node_modules@tisoap\react-flow-smart-edge\dist\react-flow-smart-edge.cjs.development.js not supported.

Instead change the require of index.js in D:\digi-curriculum\digi-curriculum-frontend\node_modules@tisoap\react-flow-smart-edge\dist\react-flow-smart-edge.cjs.development.js to a dynamic import() which is available in all CommonJS modules.

[AnhHuy02]

After spending time on Next.JS, I think I fixed this error

Instead doing 1 line import

import { SmartEdge, SmartEdgeProvider } from "@tisoap/react-flow-smart-edge";

I changed to this:

import dynamic from "next/dynamic";

const SmartEdgeProvider = dynamic(
  async () => {
    const { SmartEdgeProvider } = await import("@tisoap/react-flow-smart-edge");
    return SmartEdgeProvider;
  },
  { ssr: false }
);
const SmartEdge = dynamic(
  async () => {
    const { SmartEdge } = await import("@tisoap/react-flow-smart-edge");
    return SmartEdge;
  },
  { ssr: false }
);

You need to update the document for NextJS.

[tisoap]

Hey @AnhHuy02 , thanks for figuring out how to make this library work under Next.js! I'll test this first before making changes to readme

[tisoap]

@AnhHuy02 I just tested it under Next.js and could not replicate this problem, I was able to use named imports with no errors on the browser. Could you share a minimal example on CodeSandbox or a minimal GitHub repo where the error happens?

[AnhHuy02]

Here: https://codesandbox.io/s/trusting-pare-294d7t?file=/components/app.js

For some reason, I did one line import and it still work. That's weird.
Maybe if a large complex dataset will cause the path finding function in your library take more time to execute.

[tisoap]

I still saw no error in the sandbox you sent. I noticed you're using older versions of both react-flow-renderer and @tisoap/react-flow-smart-edge, please upgrade to their respective latest versions and try again. Here's a working CodeSandbox: https://codesandbox.io/s/smart-edge-nextjs-xx6oo4