NextJS error when importing SmartEdge and SmartEdgeProvider about react-flow-smart-edge HOT 5 CLOSED

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.

from react-flow-smart-edge.

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

from react-flow-smart-edge.

@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?

from react-flow-smart-edge.

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.

from react-flow-smart-edge.

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

from react-flow-smart-edge.