shellRaining
commented
1 month ago Add some info here, add @antv/g2plot from npm first, then write a test code
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { WordCloud } from "@antv/g2plot";
const container = ref<HTMLElement | null>(null);
onMounted(() => {
fetch("https://gw.alipayobjects.com/os/antfincdn/jPKbal7r9r/mock.json")
.then((res) => res.json())
.then((data) => {
if (!container.value) {
return;
}
const wordCloud = new WordCloud(container.value, {
data,
wordField: "x",
weightField: "value",
color: "#122c6a",
wordStyle: {
fontFamily: "Verdana",
fontSize: [24, 80],
},
interactions: [{ type: "element-active" }],
state: {
active: {
style: {
lineWidth: 3,
},
},
},
});
wordCloud.render();
});
});
</script>
<template>
<div ref="container"></div>
</template>
in dev mode it not occur error message, but when build by type command pnpm run docs:build, error msg below
build error:
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/shellraining/Documents/blog/node_modules/.pnpm/d3-interpolate@3.0.1/node_modules/d3-interpolate/src/index.js from /Users/shellraining/Documents/blog/node_modules/.pnpm/@antv+g-base@0.5.16/node_modules/@antv/g-base/lib/animate/timeline.js not supported.
Instead change the require of index.js in /Users/shellraining/Documents/blog/node_modules/.pnpm/@antv+g-base@0.5.16/node_modules/@antv/g-base/lib/animate/timeline.js to a dynamic import() which is available in all CommonJS modules.
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at Object.<anonymous> (/Users/shellraining/Documents/blog/node_modules/.pnpm/@antv+g-base@0.5.16/node_modules/@antv/g-base/lib/animate/timeline.js:5:24)
ELIFECYCLE Command failed with exit code 1.
brc-dd
Describe the bug
vitepress 打包和 vite 存在一些差异，我在项目中使用 @antv/g2plot，如果使用 vite 可以正常编译，使用 vitepress 编译则会失败。 尽管我可以将 @antv/g2plot 的依赖指定低版本避免这个错误，但是我想知道为什么会出现这种情况；
en：There are some differences between vitepress compilation and vite, I use @antv/g2plot in my project, if I use vite it compiles fine, if I use vitepress it compiles fine, I use vitepress to compile it fails. Although I could avoid this error by specifying the dependency of @antv/g2plot at a lower version, I wonder why this is the case
Reproduction
Create a new Vite+Vue project
Add @ antv/g2plot dependency and use word cloud diagram in the component, for example: https://g2plot.antv.antgroup.com/examples/more-plots/word-cloud#same -place
Preview effect, compile project, compile normally
Install vitepress v1.2.3, initialize
Create a component usage word cloud and import it in the document
Compile document, compilation failed
https://github.com/peiyanlu/vite-test-antv
Expected behavior
build success
System Info
Additional context
No response
Validations