Error in Server Side Rendering. Need a valid ESM entry

kingyue737 commented 11 months ago

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/g6@4.8.23

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 commented 9 months ago

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

kingyue737 commented 9 months ago

🎉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 commented 9 months ago

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 commented 9 months ago

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/g2@5.1.15 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

guxuerui commented 2 months ago

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

你好，加上了吗，现在G6的5.0.18版本，在Nuxt3中，还是会有这报错。

e610325502 commented 1 month ago

hello，does the g6 support ssr function now？we want to use it in nodejs env。

github-actions[bot] commented 1 week ago

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭，因为 它已经过期很久了。如果你仍然需要帮助，请创建一个新的 issue。

antvis / G6