Error in Server Side Rendering. Need a valid ESM entry

[kingyue737]

Describe the bug

I tried to introduce G6 in my Nuxt.js project but failed unless transpiling G6. G6 cannot be used in Server Side Rendering, because it does not have a valid ESM entry.

check here https://arethetypeswrong.github.io/?p=%40antv%2Fg6%404.8.23 check also https://publint.dev/@antv/[email protected]

Although G6 contains "module" in package.json, Node.js doesn't recognize the "module" field. Instead, we should use "exports" to increase compatibility with it. For example:

{
  "name":"@antv/g6",
  "exports": {
    ".": {
      "import": "./esm/index.mjs",   // IMPORTANT, use ".mjs" instead of ".js"
      "require": "./lib/index.js"
    }
  },
}

or with "type": "module"

{
  "name":"@antv/g6",
  "type":"module",
  "exports": {
    ".": {
      "import": "./esm/index.js",
      "require": "./lib/index.cjs"  // IMPORTANT, use ".cjs" instead of ".js"
    }
  },
}

I highly recommend to fix it in v5 before stable as it is a breaking change

Refs: https://publint.dev/rules#has_module_but_no_exports https://nuxt.com/docs/guide/concepts/esm#what-are-valid-imports-in-a-nodejs-context

Your Example Website or App

ignore

Steps to Reproduce the Bug or Issue

Load G6 in Node.js

Expected behavior

No error

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[hustcc]

We will consider the server side rendering feature in version 5.

[kingyue737]

🎉I just saw that ECharts would also support node environment in v5.5 https://github.com/apache/echarts/pull/19513. It may also be a reference. Glad that the community has started to embrace the ESM-default package.

[hustcc]

We have already added SSR (Server Side Rendering) capabilities in the new version of G2, so theoretically, it shouldn't be very difficult to do the same in G6. Please look forward to it.

[kingyue737]

Awesome, I will consider replacing ECharts with G2 in projects depending on G6 since they share many dependencies. It seems that the ESM entry of G2 is also not valid which may cause errors in some node environments: https://publint.dev/@antv/[email protected] https://arethetypeswrong.github.io/?p=%40antv%2Fg2%405.1.15

Rule:

• If the file has extension .cjs or .mjs, it will be recognized as CJS or ESM.
• Else If the file has extension .js, find the closest package.json file, read "type": "module" or "type": "commonjs" (by default) to determine whether file is ESM or CJS.

The entry should be ./esm/index.mjs