X6并不支持服务端渲染

[kingyue737]

Describe the bug

初次尝试X6，在SSR项目中引入X6，会报错，如：

Element is not defined
document is not defined

目前我发现的在@antv/x6-common的polyfill.ts和prefix.ts中，使用了很多document和Element，这俩只有在browser端才有，服务端Node.js是没有的，所以就出错了。 比较奇怪的是js的polyfill和css的prefix通常应该由下游用户自主决定，比如根据想要兼容的浏览器版本使用webpack/vite来transpile code, 然后用babel来加垫片，postcss来处理css兼容问题。直接在库里处理浏览器兼容问题不是良好的实践，会引入很多不需要代码增加体积。

另外一个比较大的问题是没有有效的ESM入口，也和服务端渲染有关，Node.js不认package.json中的module，必须要用exports表明ESM的入口。参考这两个网站 https://publint.dev/@antv/[email protected] https://arethetypeswrong.github.io/?p=%40antv%2Fx6%402.16.1 可以看到X6只有CJS入口，没有能被识别的ESM入口。

正确的写法应当如下：

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

或指定type: "module"

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

参考： 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

https://stackblitz.com/edit/github-h7fojp

Steps to Reproduce the Bug or Issue

在SSR项目中引入X6

Expected behavior

根据README，X6应该是支持服务端渲染的，不应该有这样的问题。

https://github.com/antvis/X6/blob/f2cae9637ebe1d3f1c26fe5209eae6e623e7c842/README.md?plain=1#L32

Screenshots or Videos

No response

Platform

• OS: Windows, Linux
• Browser: Chrome
• Version: 2.16.1
• Node: 20.10.0

Additional context

No response

[x6-bot[bot]]

👋 @kingyue737

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[abelce]

我也遇到这个问题

[America-first-melon]

我在vscode里渲染 webview 也遇到了这个问题。

[yoke233]

怎么close了 nuxt上 还是报错 ESM

[kingyue737]

@yoke233 其实不应该close，因为我的PR只是解决了一部分问题。当然现在已经可以在nuxt上用了，但需要transpile这个库：

export default defineNuxtConfig({
  build: {
    transpile: [
      /^@antv/,
      'gl-matrix',
    ],
  }
}）

我会再开一个issue追踪剩余的问题。

[NewByVector]

我直接 reopen 吧。

[kingyue737]

其他可视化相关开源库：

• ECharts 已经merge了相关改动https://github.com/apache/echarts/pull/19513 ，将于 v5.5变为默认ESM并支持 node，可做参考
• @antv/G6 计划于v5支持服务端渲染 https://github.com/antvis/G6/issues/5205#issuecomment-1911527693 ，如果G6先实装了，也可以参考一下
• @antv/G2已经支持服务端渲染了，但是ESM入口扩展名貌似不太对，会被识别为CJS，届时也可以参考一下