xCss/Valine

vitepress 构建报错 window is not defined

wulisensen opened this issue · 2 comments

wulisensen commented

在vitepress 中引用，构建时报错

build error:
ReferenceError: window is not defined
at /Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:17:38752
at /Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:17:38714
at e.exports (/Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:17:39216)
at Object. (/Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:17:22624)
at t (/Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:7:316)
at Object. (/Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:17:40271)
at t (/Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:7:316)
at /Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:7:699
at /Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:7:710
at /Users/wuguangsen/self/blog-vitepress/node_modules/valine/dist/Valine.min.js:7:81
error Command failed with exit code 1.

ZhongxuYang commented

You can use dynamic import() and call in mounted function.

like this:

const initValine = async () => {
  const { default: Valine } = await import('valine');
  const valineOptions = {
    el:'#vcomments',
    appId: '******',
    appKey: '******',
    path: window.location.pathname,
  };

  new Valine(valineOptions)
};

onMounted(() => {
  initValine()
})
  • 👍1
tkzt commented

You can use dynamic import() and call in mounted function.

like this:

const initValine = async () => {
  const { default: Valine } = await import('valine');
  const valineOptions = {
    el:'#vcomments',
    appId: '******',
    appKey: '******',
    path: window.location.pathname,
  };

  new Valine(valineOptions)
};

onMounted(() => {
  initValine()
})

It works to me. Great thanks :D