Must use import to load ES Module:xx,@moefy-canvas/theme-popper/dist/index.es.js

[maicFir]

打包会报错，当我把theme-popper包package.json的type:'module'去掉，打包就成功，这种有办法解吗

[SigureMo]

打包会报错，当我把theme-popper包package.json的type:'module'去掉，打包就成功，这种有办法解吗

导入方式？打包方式？

[maicFir]

打包会报错，当我把theme-popper包package.json的type:'module'去掉，打包就成功，这种有办法解吗

导入方式？打包方式？

我是在vuepress2.0中使用了你的插件，本地运行环境不会有问题，但是运行打包后报错load es moddule

贴上具体代码，具体可以参考下

<template>
  <canvas id="canvas"></canvas>
</template>

<script>
import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import { Popper, PopperShape, MAX_Z_INDEX } from "@moefy-canvas/theme-popper";
const weakMap = new WeakMap();

export default defineComponent({
  name: "Spakler",
  setup(props, ctx) {
    const themeConfig = {
      shape: PopperShape.Star,
      size: 1.75,
      numParticles: 10,
    };
    const canvasOptions = {
      opacity: 1,
      zIndex: MAX_Z_INDEX,
    };
    const canvansEl = ref(null);
    const sparkler = new Popper(themeConfig, canvasOptions);
    const installSpakler = () => {
      const curentCanvansDom = document.getElementById("canvas");
      canvansEl.value = curentCanvansDom;
      weakMap.set(curentCanvansDom, curentCanvansDom);
      sparkler.mount(weakMap.get(curentCanvansDom));
    };
    onMounted(() => {
      // 点击鼠标烟花效果
      installSpakler();
    });
    onUnmounted(() => {
      sparkler.unmount(weakMap.get(canvansEl.value));
    });
    return {};
  },
});
</script>

[SigureMo]

我没有使用过 VuePress2，不过看样子貌似是通过 require 的方式导入 @moefy-canvas/theme-popper，而 @moefy-canvas/theme-popper 是一个 ESM-Only 的 package，所以报错。

我最近没有关注 VuePress2 的进展，不过在这之前 VuePress2 和 VitePress 都有一个相同的问题，见 https://github.com/vuepress/vuepress-next/issues/585 和 https://github.com/vuejs/vitepress/issues/476 ，这可以通过在 vite 配置中防止 ESM-Only 的 package 在 SSR 时被外部化来解决（在 VuePress2 中这可能需要写在 bundler.viteBundler.viteOptions 中）。

import { defineConfig } from 'vite'
export default defineConfig({
  ssr: {
    noExternal: ['lib-1', 'lib-2']
  },
})

我可以确定通过这种方式在 VitePress 下是可以正常打包的，但我不太清楚 VuePress2 是否有效果

[SigureMo]

另外，moefy-vuepress 系列插件的 VuePress2 版本其中一部分可以从 https://github.com/denaro-org/vuepress-theme-denaro 找到，看样子重新打包成了 cjs，应该是开箱即用的（不过我没有测试过）

[maicFir]

另外，moefy-vuepress 系列插件的 VuePress2 版本其中一部分可以从 https://github.com/denaro-org/vuepress-theme-denaro 找到，看样子重新打包成了 cjs，应该是开箱即用的（不过我没有测试过）

非常感谢，确实是vuepress2.0的服务端渲染ssr配置的问题，参考官方文档有这样的问题，非常谢谢，已经解决，谢谢博主的答疑