ESM packages need to be imported

[bigbigbo]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.3.0: Thu Jan  5 20:53:49 PST 2023; root:xnu-8792.81.2~2/RELEASE_X86_64

Binaries:
  Node: 16.13.0
  npm: 8.1.0
  Yarn: 1.22.17
  pnpm: 7.27.0

Relevant packages:
  next: 13.2.5-canary.18
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

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

1. install @antv/x6

   pnpm add @antv/x6

   2. use @antv/x6

      
      "use client";
      import { useEffect } from "react"
      import { Graph } from '@antv/x6'

export default function Home() { useEffect(() => { const graph = new Graph({ container: document.getElementById("container"), width: 800, height: 600 }) }, [])

return

}

4. an error occurred during the compilation process
```bash
./node_modules/.pnpm/@antv+x6-common@2.0.11/node_modules/@antv/x6-common/lib/array/array.js:4:0
Module not found: ESM packages (lodash-es) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/@antv+x6-common@2.0.11/node_modules/@antv/x6-common/lib/array/index.js
./node_modules/.pnpm/@antv+x6-common@2.0.11/node_modules/@antv/x6-common/lib/index.js
./node_modules/.pnpm/@antv+x6@2.5.7/node_modules/@antv/x6/lib/index.js
./app/page.tsx

Describe the Bug

I open this webpage(https://nextjs.org/docs/messages/import-esm-externals) to check the help information.

Possible Ways to Fix It

1. Use import or import() to reference the package instead. (Recommended)
2. If you are already using import, make sure that this is not changed by a transpiler, e. g. TypeScript or Babel.
3. Switch to loose mode (experimental.esmExternals: 'loose'), which tries to automatically correct this error.

I'm sure @antv/x6、@antv/x6-common and lodash-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

[suwu150]

@bigbigbo is there a solution

[suwu150]

https://github.com/vercel/next.js/issues/38826

[anuj-noumena]

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>
  );
}