Failed to execute 'appendChild' on 'Node': This node type does not support this method

I integrated Vue-styleguidist with my project I am getting errors when I wrote readme file with single vue file like

<template>
  <ac-collection
    ref="ac_collection"
    :url="collection.url"
    :method="collection.method"
    :ac_cursor="{}"
    :params="collection.params"
    :loading_image="collection.loading_image"
    :sort_key="collection.sort_key"
  >
    <template #header>
      <header class="border p-2 mb-2">Ac collection header</header>
    </template>

    <template #body="{ data }">
      <b-row>
        <b-col v-for="item in data" :key="item.id" class="ac__item" :lg="6">
          <b-card :title="item.name" class="mb-2">
            <b-card-text>{{ item.body }}</b-card-text>
          </b-card>
        </b-col>
      </b-row>
    </template>

    <template #footer>
      <footer class="border p-2 mt-2">ac collection footer</footer>
    </template>
  </ac-collection>
</template>

<script>
export default {
  name: 'ac-collection',
  components: {
    acCollection
  },
  data() {
    return {
      collection: {
        url: "https://jsonplaceholder.typicode.com/posts/1/comments",
        loading_image:
          "https://loading.io/spinners/dual-ring/lg.dual-ring-loader.gif",
        ac_cursor: {
          postId: 1
        },
        method: "GET",
        params: {
          headers: {
            "Custom-Header": "My custom header"
          }
        },
        sort_key: "name"
      }
    };
  },
  mounted() {
    this.$refs.ac_collection.set_ajax();
    console.log(this.$refs);
  }
};
</script>

<style>
</style>

and styleguide.config.js

module.exports = {
	// webpackConfig: require('./build/webpack.base.config.js'),
    require: [
        './styleguide/scripts.js',
        './styleguide/styles.css',

        // Bootstrap
        './node_modules/bootstrap/dist/css/bootstrap.css',
        './node_modules/bootstrap-vue/dist/bootstrap-vue.css',
    ],
    showUsage: true
};

script.js file

import Vue from 'vue'
// import _ from 'lodash';

import BootstrapVue from 'bootstrap-vue'
// import VueCodemirror from 'vue-codemirror'
// import 'vue-awesome/icons'
// import Icon from 'vue-awesome/components/Icon'
// import Multiselect from 'vue-multiselect';
// import VueCoreImageUpload from 'vue-core-image-upload'

// // Flat Picker
// import flatPickr from 'vue-flatpickr-component';
// import 'flatpickr/dist/flatpickr.css';

// import VueTimeago from 'vue-timeago';
// import vueTimeagoEnUs from 'vue-timeago/locales/en-US.json';

// Vuelidate Form validator
import VeeValidate from 'vee-validate';

// Import All appup Components
import * as Appup from '../src/index';

// Import mixins to be used globally
// import {Commons} from '@/mixins/commons'
// Vue.mixin(Commons);

Vue.use(BootstrapVue);
// Vue.use(VueCodemirror);
// Vue.use(flatPickr);
Vue.use(VeeValidate);
// Vue.use(VueTimeago, {
//     name: 'vue-timeago',
//     locale: 'en-US',
//     locales: {
//         'en-US': vueTimeagoEnUs
//     }
// });

// Vue.component('icon', Icon);
// Vue.component('vue-multiselect', Multiselect);
// Vue.component('vue-core-image-upload', VueCoreImageUpload);

// Register Components
for (let compKey in Appup) {
    Vue.component(Appup[compKey].name, Appup[compKey])
  }

// Use Axios as the default $http service for all Ajax requests
// Vue.prototype.$http = require('axios').create({
//     config: {
//         headers: {
//             'Content-Type': 'multipart/form-data'
//         },
//         crossDomain: true
//     }
// });

please find out screenshot for errors

https://snag.gy/ENBTZm.jpg

https://snag.gy/ySL1sC.jpg

Please help me anyone

[dharmatv]

Hello @elevatebart Thanks for your reply, and sorry for the late response. can you please find out below attachement(.zip) for repo

I don’t have time to create new repo in sand box, please don’t mind styleguide.zip

[elevatebart]

If you look at the name field of the gravatar component in the fix branch it does not have a dash anymore instead its name is acGravatar and it works. I will do a special treatment on components to have this fixed. In the meantime, you can try removing the dahses.

Bart