Home

Issue: 1174

use a third lib in dev mode run ok and production throw DOMException

[issue link]

at dev mode , only a warn: clientside and server content is not equal
but in production( npm run build && npm start )
in console it throws

[nuxt.js] Cannot load components DOMException [HierarchyRequestError: "Node cannot be inserted at the specified point in the hierarchy"
code: 3
nsresult: 0x80530003
location: http://localhost:3000/_nuxt/vendor.bundle.6dd843ba30f5c0b80ac1.js:6]

so, what happens?

nuxt ver: 1.0.0-alpha.5
third lib: element-ui v1.4.0

plugins/element-ui:

import Vue from 'vue'
import { Dialog } from 'element-ui'

if (process.BROWSER_BUILD) {
  Vue.use(Dialog)
  // Vue.use(require('element-ui')) // all components
}

nuxt.config.js:

module.exports = {
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: `dev ${dev}-${this.dev}` }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      ...(dev ? [] : cdnLink)
    ],
    script: [
      ...(dev ? [] : cdnScript)
    ]
  },
  css: [
    'normalize.css',
    ...(dev ? devUseCSS : []),
    { src: '~assets/stylus/main.styl', lang: 'stylus' }
  ],
  // plugins: ['~plugins/vuex-router-sync.js'],
  plugins: ['~plugins/vuex-router-sync.js', '~plugins/element-ui.js'], // { src: '~plugins/element-ui.js', ssr: false}
  build: {
    vendor: ['axios'],
    // vendor: ['axios' ,'element-ui'],
    babel: {
      plugins: [['component', [{
        libraryName: 'element-ui',
        styleLibraryName: 'theme-default'
      }]]]
    }
  },
  loading: { color: '#41B883' }
}

2017-07-27 20-08-47

This question is available on Nuxt.js community (#c1031)