Vitepress下打包npm run docs:build会报错

[XiangZhenHua11]

问题描述

正常使用运行没事,Vitepress下打包npm run docs:build会报错

(node:23656) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
build error:
 D:\work\Project(御云)\plm-vue\plm-vue-lib\docs\node_modules\@wangeditor\editor-for-vue\dist\index.esm.js:20
import { defineComponent, ref, shallowRef, onMounted, watch, toRaw, openBlock, createElementBlock, watchEffect } from "vue";
^^^^^^

SyntaxError: Cannot use import statement outside a module

wangEditor 版本

wangEditor5

是否查阅了文档 ？

（文档链接 www.wangeditor.com ）

*是

最小成本的复现步骤

（请告诉我们，如何最快的复现该问题？）

• 使用vitepress打包，引入wangEditor
• npm run docs:build

[XiangZhenHua11]

然后去node_modules@wangeditor\editor-for-vue\package.json 加入"type": "module", 又会报

build error:
 TypeError: document.getElementsByTagName is not a function
    at Object.currentScript (D:\work\Project\plm-vue\plm-vue-lib\docs\node_modules\@wangeditor\editor\dist\index.js:23648:12752)

尝试了动态组件,ClientOnly，甚至按照包但是组件里面不使用都会报一样的错误 原因是在nodejs里没有document对象，导致报错 希望官方处理下,感谢!

[wangfupeng1988]

原因是在nodejs里没有document对象，导致报错

SSR 没问题，用 Next.js 和 Nuxt.js 都可以正常运行的

[tomiaa12]

遇到同样的问题，只要引入就会报错 Element is not defined

[haiting]

遇到同样的问题，希望作者能够做一下判断，非常感谢

[haiting]

然后去node_modules@wangeditor\editor-for-vue\package.json 加入"type": "module", 又会报

build error:
 TypeError: document.getElementsByTagName is not a function
    at Object.currentScript (D:\work\Project\plm-vue\plm-vue-lib\docs\node_modules\@wangeditor\editor\dist\index.js:23648:12752)

尝试了动态组件,ClientOnly，甚至按照包但是组件里面不使用都会报一样的错误 原因是在nodejs里没有document对象，导致报错 希望官方处理下,感谢!

这个问题你有自己解决了么

[haiting]

原因是在nodejs里没有document对象，导致报错

SSR 没问题，用 Next.js 和 Nuxt.js 都可以正常运行的

但是vitepress打包会报错，可以帮忙看看吗

[haiting]

原因是在nodejs里没有document对象，导致报错

SSR 没问题，用 Next.js 和 Nuxt.js 都可以正常运行的

在 vitepress 中， pnpm run build 会报错 https://stackblitz.com/edit/vitejs-vite-9oxh1x?file=src%2Fcomponents%2Feditor%2Findex.vue&terminal=dev

[haiting]

@wangfupeng1988 vitepress build处理ESM代码是严格的，在无效的ESM代码上会抛出错误 https://vite-plugin-ssr.com/invalid-esm#solution

[sinceow]

@wangfupeng1988 这边同样有这个问题

[Cristop3]

我是二次封装的wangEditor组件 也是vitepress打包报错 document.getElementsByTagName is not a function 直接影响打包dist生成 应该就是PrismJS报错 我是将组件改为异步组件app.component( "xxx", defineAsyncComponent(() => import("xxxx")) ); 这样应该可以跳过node报错 然后打包 也会报 rendering pages...TypeError: document.getElementsByTagName is not a function 但是 不影响vitepress的dist生成 部署后能正常访问 @sinceow @haiting @XiangZhenHua11

[lhz7695001]

遇到同样的问题，希望作者能够做一下判断，非常感谢

[Yalonexm]

我在对组件二次封装，通过vuepress管理文档，打包时遇到同样的问题，我的解决办法是用动态组件。

<template>
  <div :style="wrapStyle" :class="wrapClass">
    <!-- 工具栏 -->
    <component
      :is="toolBarComponent"
      v-show="!editorOpts.readOnly && !disable"
      :style="toolbarStyle"
      :class="toolbarClass"
      :editor="editor"
      :defaultConfig="toolbarOpts"
      :mode="mode"
    />

    <!-- 编辑区域 -->
    <component
      :is="editorComponent"
      :style="{ ...editorStyle, minHeight: px(minHeight) }"
      :class="editorClass"
      v-model="html"
      :defaultConfig="editorOpts"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
      @onDestroyed="onDestroyed"
      @onMaxLength="onMaxLength"
      @onFocus="onFocus"
      @onBlur="onBlur"
      @customAlert="customAlert"
    />
  </div>
</template>

<script>
export default {
  name: "xxx",
   .........
  data() {
    return {
      editor: null,
      disable: false,
      toolBarComponent: null,
      editorComponent: null,
    };
  },
 mounted() {
    this.loadComponent();
  },
  beforeDestroy() {
    if (this.editor == null) return;
    this.editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    /**
     * 动态导入组件 解决docs生成时 ssr渲染问题。
     */
    loadComponent() {
      import("@wangeditor/editor-for-vue").then((module) => {
          // 成功导入后，将组件注册到Vue实例中
          this.toolBarComponent = module.Toolbar;
          this.editorComponent = module.Editor;
        }) .catch((error) => {
          // 处理导入失败的情况
          console.error("组件加载失败:", error);
        });
    },
 }
};
</script>