dyamic import error

[flozero]

vue.esm.js?a026:628 [Vue warn]: Failed to resolve async component: () => Promise.all(/*! import() */[__webpack_require__.e(16), __webpack_require__.e(37)]).then(__webpack_require__.bind(null, /*! ./node_modules/vuepress-plugin-live/vueLiveWithLayout */ "./node_modules/vuepress-plugin-live/vueLiveWithLayout.js"))
Reason: TypeError: Cannot set property 'dynamicImport' of undefined

What my config looks like

const path = require('path');
const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project 
  content: [
    '../../src/**/*.vue',
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
module.exports = {
  title: 'Hello VuePress',
  description: 'Just playing around',
  postcss: {
    plugins: [
      require('tailwindcss')(path.join(__dirname, '../../tailwind.config.js')),
      require('autoprefixer')({
        add: true,
        grid: true
      }),
      ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
    ],
  },
  plugins: [
    ['live'],
    ['docgen', {
      componentsDir: path.join(__dirname, '../../src/components')
    }]
  ],
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Components', link: '/components/' },
    ]
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, '../../src')
      }
    }
  }
}

what my component looks like

<template>
  <div :class="this.width">
    <div class="p-2">
      <div class="card">
        <div class="flex items-center pb-4">
          <img
            class="w-10 h-10 rounded-full mr-4"
            :src="require('@/assets/mael.jpeg')"
            alt="Avatar of Jonathan Reinink"
            width="50"
          />
          <div class="text-sm text-left">
            <p class="text-gray-900 leading-none mb-2">Jonathan Reinink</p>
            <p class="text-gray-600 leading-none mt-2">Aug 18</p>
          </div>
        </div>
        <div class="mb-8">
          <div class="text-gray-900 font-bold text-xl mb-2">
            Can coffee make you a better developer?
          </div>
          <p class="text-gray-700 text-base">{{ collab.description }}</p>
        </div>
        <div class="px-6 py-4 pb-10">
          <Tags v-for="(tag, i) in collab.tags" :key="i" :text="tag" />
        </div>
        <div class="flex row justify-around">
          <button
            class="button"
            @click="
              $router.push({ name: 'profiles', params: { profileId: 1 } })
            "
          >
            <img class=" w-4 h-4 mr-2" src="~@/assets/svg/info.svg" />
            <span class="hidden md:block">Infos</span>
          </button>
          <button
            v-if="!me"
            class="w-1/3 flex cursor-not-allowed items-center justify-center text-grey-500 font-bold py-2 px-4 rounded"
          >
            <img
              class=" text-gray-500 w-4 h-4 mr-2"
              src="~@/assets/svg/unlock.svg"
            />
            <span class="hidden md:block">Admin</span>
          </button>
          <button v-else class="button">
            <img class=" w-4 h-4 mr-2" src="~@/assets/svg/edit.svg" />
            <span class="hidden md:block">Edit</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tags from "@/components/Tags";
export default {
  name: "Profile",
  components: {
    Tags
  },
  props: {
    collab: {
      type: Object,
      required: true
    },
    width: {
      type: String,
      default: "w-full sm:w-1/2 md:w-1/3 lg:w-1/3 xl:w-1/4"
    }
  },
  data: () => {
    return {
      me: false
    };
  }
};
</script>

<style lang="postcss" scoped>
.button {
  @apply w-1/3 flex cursor-pointer items-center justify-center bg-blue-500  text-white font-bold py-2 px-4 border-b-4 border-blue-700 rounded;
}

.button:hover {
  @apply bg-blue-400 border-blue-500;
}

.card {
  @apply border-r border-b shadow-md rounded border-l border-gray-400 bg-white rounded-b p-4 flex flex-col justify-between leading-normal;

  @screen lg {
    @apply border-l-0 border-t rounded-r rounded-b-none;
  }
}
</style>

<docs>
  ```vue live
    <Profile
      width="w-full"
      :collab="{
        id: 1,
        firstName: 'Reingink',
        lastName: 'Jonathan',
        arrived: new Date().getTime(),
        description:
          'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.',
        tags: ['vuejs', 'javascript', 'react'],
        image: '/assets/mael.jpeg',
        missions: [
          {
            client: 'Leroy Merlin',
            description: ''
          }
        ]
      }" />
    ```
</docs>

[elevatebart]

Would you happen to have this on a repo somewhere?

[flozero]

yes with https://github.com/f3ltron/vuejs-scaffold-tailwind watch the doc and add a

/```vue live in components preview