Compilation failed after merging vitepress and Disqus, request help

you-hengh commented 1 year ago

Describe the bug

Disqus 是一个不错的评论系统, 我期望它和 vitepress 合并后会给我的博客带来更好的阅读体验, Disqus is a good comment system, and I hope that the merger of it and vitepress will bring a better reading experience to my blog.

事实上,我在 dev 环境下已经成功把 Disqus 带入了 layout 的插槽里: In fact, I have successfully brought Disqus into the slot of layout in dev environment:

但是当我 build 的时候,编辑器产生了大量的错误,具体内容见尾部log: But when I build, the editor produces a lot of errors. See the tail log for details.

我自己不知道该怎么处理,希望能得到帮助,如果我提供的信息不够完善,可以随时联系我,谢谢! I do not know how to deal with it, hope to get help, if the information I provide is not perfect, you can contact me at any time, thank you!

Reproduction

我在stickblitz 已经分享了代码 https://stackblitz.com/edit/vite-bdtuuc?file=docs%2F.vitepress%2Ftheme%2Findex.ts I have shared the code https://stackblitz.com/edit/vite-bdtuuc?file=docs%2F.vitepress%2Ftheme%2Findex.ts on stickblitz.

但是它有点问题, 它好像无法渲染出Disqus的页面,我不知道是不是环境问题或者是网络请求被拦截了 But there's something wrong with it. It doesn't seem to be able to render the Disqus page. I don't know if it's an environmental problem or if the network request has been blocked.

总之我操作的只有 2 个地方: In short, there are only two places I operate:

创建了docs/components/Discussion.vue; 1. Created docs/components/Discussion .vue

<script setup>
import DefaultTheme from 'vitepress/theme'

const { Layout } = DefaultTheme
;(function () {
  // DON'T EDIT BELOW THIS LINE
  var d = document,
    s = d.createElement('script')
  s.src = 'https://bddxg.disqus.com/embed.js'
  s.setAttribute('data-timestamp', +new Date())
  ;(d.head || d.body).appendChild(s)
})()
</script>

<template>
  <Layout>
    <template #doc-after>
      <br />
      <br />
      <div id="disqus_thread"></div>
    </template>
  </Layout>
</template>

修改了docs/.vitepress/theme/index.ts; 2. Modified docs/.vitepress/theme/index.ts
```
import DefaultTheme from 'vitepress/theme';
```

import Discussion from '../../components/Discussion.vue';

export default { ...DefaultTheme, Layout: Discussion, };


### Expected behavior

vitepress 能够正常的和Disqus合并,并在生产环境正常工作
Vitepress can merge with Disqus normally and work normally in production environment.

### System Info

```sh
System:
    OS: macOS 13.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.38 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/Library/pnpm/node
    npm: 9.5.1 - ~/Library/pnpm/npm
    pnpm: 8.6.3 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 115.0.5790.170
    Safari: 16.6
  npmPackages:
    vitepress: ^1.0.0-rc.4 => 1.0.0-rc.4

Additional context

github 提示我日志太长,我将日志分享到了谷歌网盘,地址:https://drive.google.com/file/d/13X8e_sFMtE09SNIXx8B5xm2ZUp0QIPD6/view?usp=drive_link

Github prompted me that the log was too long, and I shared the log to Google disk at https://drive.google.com/file/d/13X8e_sFMtE09SNIXx8B5xm2ZUp0QIPD6/view?usp=drive_link

Validations

[X] Check if you're on the latest VitePress version.
[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

brc-dd commented 1 year ago

The logs seem to be private. Can you make that public?

you-hengh commented 1 year ago

https://drive.google.com/file/d/13X8e_sFMtE09SNIXx8B5xm2ZUp0QIPD6/view?usp=drive_link

非常抱歉,我没怎么使用过谷歌网盘,现在已经重新调整了,麻烦您看看,地址没有发生变化,但已经可以访问了 I am very sorry, I have not used Google disk very much, but now I have readjusted it. Please have a look, the address has not changed, but it can be accessed.

brc-dd commented 1 year ago

Try this: https://stackblitz.com/edit/vite-932vqq

But there's something wrong with it. It doesn't seem to be able to render the Disqus page. I don't know if it's an environmental problem or if the network request has been blocked.

Network requests are blocked. Click on "open in new tab" on top-right to make it work:

vuejs / vitepress