[Bug]: Got SyntaxError & ReferenceError when Importing waline.js v3 by CDN | 通过CDN导入waline.js v3时得到语法错误与引用错误

[Trichiurus-lepturus]

问题描述 | Describe the bug

To import waline I use @waline/hexo-next npm package, which imports waline via CDN.
I used to use waline v2 and was without the errors below.
Now I try to update to v3, changed in _config.next.yml like:

waline:
  # libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js
  libUrl: https://unpkg.com/@waline/client@v3/dist/waline.js
  # cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css
  cssUrl: https://unpkg.com/@waline/client@v3/dist/waline.css

(The config before are marked as a comment.)
Deploy the website, visit and waline is gone. Nothing between <div class="comments animated fadeIn" id="waline">and</div>.
Use 'Inspect' to check and in Console tab shows these errors:

Uncaught SyntaxError: export declarations may only appear at top level of a module [waline.js:71:20998](https://unpkg.com/@waline/client@v3/dist/waline.js)
Uncaught (in promise) ReferenceError: Waline is not defined
    <anonymous> https://daiyu.host/2024/04/16/hello-world/:392

The statement near the position indicated by SyntaxError (in waline.js, line 71, col 20998) is like this (formatted by WebStorm):

export
{
    zd as RecentComments,
    jd as UserList,
    Ar as addComment,
    no as commentCount,
    An as defaultLocales,
    Ir as deleteComment,
    Lr as fetchCommentCount,
    Ci as getArticleCounter,
    Sr as getComment,
    Or as getPageview,
    jr as getRecentComment,
    Pr as getUserList,
    Od as init,
    Mr as login,
    mo as pageviewCount,
    Sn as updateArticleCounter,
    Zt as updateComment,
    zr as updatePageview,
    po as version
};

It seems that this is exactly the statement that throws the SyntaxError.
However I have no clue to fix these errors after reading the docs carefully.
Both Firefox (version 125.0) and Chromium (version 122.0) throws these two errors.

---

我使用@waline/hexo-next包，此包通过CDN导入waline。
我之前使用waline v2，没有遇到下文说的error。
尝试更新到waline v3，我对_config.next.yml做出了以下改变：

waline:
  # libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js
  libUrl: https://unpkg.com/@waline/client@v3/dist/waline.js
  # cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css
  cssUrl: https://unpkg.com/@waline/client@v3/dist/waline.css

（之前的配置以注释表示）
部署网站并访问后，发现waline评论区消失，<div class="comments animated fadeIn" id="waline"><div>之间没有内容。
用开发者工具查看，在Console选项卡下发现了两个error：

Uncaught SyntaxError: export declarations may only appear at top level of a module [waline.js:71:20998](https://unpkg.com/@waline/client@v3/dist/waline.js)
Uncaught (in promise) ReferenceError: Waline is not defined
    <anonymous> https://daiyu.host/2024/04/16/hello-world/:392

其中SyntaxError显示的位置附近（waline.js，71行20998列）的代码如下（使用Webstorm格式化过）：

export
{
    zd as RecentComments,
    jd as UserList,
    Ar as addComment,
    no as commentCount,
    An as defaultLocales,
    Ir as deleteComment,
    Lr as fetchCommentCount,
    Ci as getArticleCounter,
    Sr as getComment,
    Or as getPageview,
    jr as getRecentComment,
    Pr as getUserList,
    Od as init,
    Mr as login,
    mo as pageviewCount,
    Sn as updateArticleCounter,
    Zt as updateComment,
    zr as updatePageview,
    po as version
};

报错的语句应当就是上面的这一句，但我仔细阅读过文档后，也没能找到修复以上错误的线索。
Firefox (版本125.0）和Chromium（版本122.0）的报错是吻合的。

问题网站 | Website URL

https://daiyu.host/2024/04/16/hello-world/

服务部署在哪里？ | Where your waline deploy?

Vercel (Default)

数据存储在哪里？| Where your comment data store?

LeanCloud(https://leancloud.app)

[lizheming]

https://unpkg.com/@waline/[email protected]/dist/waline.umd.js 用这个地址

---

https://unpkg.com/@waline/[email protected]/dist/waline.umd.js Use this address

[Trichiurus-lepturus]

https://unpkg.com/@waline/[email protected]/dist/waline.umd.js 用这个地址

https://unpkg.com/@waline/[email protected]/dist/waline.umd.js Use this address

Thank you for your solution. Waline can load now and without errors, including the errors I mentioned above.
I suggest that this tip should be added to the document, at https://waline.js.org/en/cookbook/import/cdn.htmlso that ones in need get the solution easier. Should I make a pull request to add this?

感谢您的解答。现在Waline可以正常加载出来，不再出现我在上面提到的error或其他error。
我建议将这一条加入Waline文档的这个页面，好让需要的人更容易地获取到解决方案。请问我是否应该为文档提交一个pull request来添加这个内容？

[lizheming]

不用更新文档，本质是 @waline/hexo-next 没有使用 ES Module 的加载方式 <script type="module">，所以需要使用 UMD 的模块。文档本身是没有问题的。

---

There is no need to update the document. The essence is that @waline/hexo-next does not use the ES Module loading method <script type="module">, so it needs to use UMD modules. There is nothing wrong with the documentation itself.

[Trichiurus-lepturus]

Thank you for your detailed explanation.
感谢您细心解答。

[lizheming]

不客气~
ps. Waline 仓库有 GitHub Action 工具，支持自动翻译中文内容补充到 issue 中，所以如果觉得麻烦，可以只发中文内容就行~

---

You're welcome~
ps. The Waline warehouse has a GitHub Action tool that supports automatic translation of Chinese content and adds it to the issue, so if you find it troublesome, you can just post the Chinese content~

[Mister-Hope]

@waline/hexo-next 需要更新一下么？我不是很熟悉hexo那边的东西

---

@waline/hexo-next Do you need to update it? I'm not very familiar with hexo stuff.

[lizheming]

@waline/hexo-next 我思考了下，暂时不更新了。主要有几点考虑：

1. 现阶段是有方案使用 v3 的
2. 用户的配置是一个 url，代码层面可能不太好知晓它是否需要使用 es module 的模式加载。可能还是会有类似的 issue 出来。除非我们增加是否是 module 的配置，但感觉也没有太大的必要

---

@waline/hexo-next I thought about it and won’t update it for the time being. There are several main considerations:

1. At this stage, there are plans to use v3
2. The user's configuration is a URL, and it may not be easy to know at the code level whether it needs to be loaded using the es module mode. There may still be similar issues coming out. Unless we add the configuration of module, but it doesn’t feel necessary