Closed AnhHuy02 closed 2 years ago
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.
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
@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?
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.
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
In NextJS 12.1.0, I used React Flow v10 with SmartEdge v0.5.0, and tried to import like your document
But the browser showed the error: