Open bigbigbo opened 1 year ago
@bigbigbo is there a solution
To utilize Graphin, G6, or X6 based components with Next.js, you might need to implement dynamic imports to bypass server-side rendering (SSR) issues. Here's a step-by-step guide:
Step 1: Create your Graphin/G6/X6 based component Firstly, develop your Graphin, G6, or X6 based component. Let's assume the file containing this component is named "myGraphineComponent.js".
Step 2: Dynamic Import Next.js supports ECMAScript dynamic imports, which allows you to conditionally load modules and components at runtime. To utilize your Graphin/G6/X6 component in another part of your application, you need to perform a dynamic import. This can be done using the next/dynamic package.
Here's how you do it:
// Import the 'dynamic' function from 'next/dynamic'
import dynamic from "next/dynamic";
// Dynamically import your component
const MyGraphineComponent = dynamic(() => import("./myGraphineComponent"), {
ssr: false, // disable server-side rendering for this component
});
export default function MyView() {
return (
<div style={{ height: "100%" }}>
<MyGraphineComponent data={[]} />
</div>
);
}
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://github.com/bigbigbo/nextjs-bugreport
To Reproduce
@antv/x6
@antv/x6
export default function Home() { useEffect(() => { const graph = new Graph({ container: document.getElementById("container"), width: 800, height: 600 }) }, [])
return
}Describe the Bug
I open this webpage(https://nextjs.org/docs/messages/import-esm-externals) to check the help information.
I'm sure
@antv/x6
、@antv/x6-common
andlodash-es
are ESM, and I already using import. Although I can solve this problem through the suggestion in the third point, it is not recommended. Regarding the second suggestion, I don't know how to check this point.Expected Behavior
compile success no error.
Which browser are you using? (if relevant)
Microsoft Edge 111.0.1661.51
How are you deploying your application? (if relevant)
No response