Build failed when using element UI: HTMLElement is not defined

[SherilyShieh]

'yarn docs:dev' is work, but 'yarn docs:build' had cased that error:

Version:
"vuepress": "^1.0.0-alpha.47"

Other relevant information
Your OS: MacOS 10.14.4
Node.js version: 12.1.0
Browser version: Chrome latest
Is this a global or local install? Local
Which package manager did you use for the install? yarn, npm
Does this issue occur when all plugins are disabled? yes

[ulivz]

Thanks for your interest in VuePress. According to Browser API Access Restrictions, you can know:

Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks.

You can use dynamic import syntax to use a UI library that's not SSR friendly:

import locale from 'element-ui/lib/locale/lang/en';
import 'element-ui/lib/theme-chalk/index.css';

export default ({ Vue, isServer }) => {
  /**
   * Only import element-ui under client side.
   */
  if (!isServer) {
    import('element-ui').then(elementUI => {
      Vue.use(elementUI.default, { locale })
    })
  }
}

---

BTW, this issue is firstly reported at ElemeFE/element#15261 and fixed at ElemeFE/element#15277 but not released yet.

[bennypowers]

I encountered this error when extending the default theme to add a click-to-copy element to my home page:

<template>
  <!-- more template -->
  <clipboard-copy for="homepage-npm-init-command">
    <code class="language-bash" id="homepage-npm-init-command">
      npm init @open-wc
    </code>
  </clipboard-copy>
  <!-- more template -->
</template>
<script>

import NavLink from '@theme/components/NavLink.vue';

export default {
  components: { NavLink },

  beforeMount() {
    import('@github/clipboard-copy-element');
  },

  computed: {
    data () {
      return this.$page.frontmatter
    },

    actionLink () {
      return {
        link: this.data.actionLink,
        text: this.data.actionText
      }
    }
  }
}
</script>

This indeed imports my custom-element just fine, however, the console complains:

[Vue warn]: Unknown custom element: <clipboard-copy> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Home> at docs/.vuepress/theme/components/Home.vue
       <Layout> at node_modules/@vuepress/theme-default/layouts/Layout.vue
         <GlobalLayout> at node_modules/@vuepress/core/lib/client/components/GlobalLayout.vue
           <Root> vue.runtime.esm.js:619
    VueJS 36

So, which is preferable?