QingWei-Li / vue-markdown-loader

📇 Convert Markdown file to Vue2.0 component.
704 stars 161 forks source link

[Vue warn]: Invalid Component definition: with `vue.config.js` #47

Open nylira opened 6 years ago

nylira commented 6 years ago

Here is my code in vue.config.js, which is used by vue cli 3.0:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("pdf")
      .test(/\.pdf/)
      .use("")
      .loader("file-loader")
    config.module
      .rule("md")
      .test(/\.md/)
      .use("vue-loader")
      .loader("vue-loader")
      .loader("vue-markdown-loader/lib/markdown-compiler")
      .tap(options => {
        raw: true
      })
  }
}

The PDF loader works fine, but the vue-markdown-loader gives me this error in Chrome:

[Vue warn]: Invalid Component definition: <template><section><h1....

It appears that the markdown is being parsed correctly into html, and then into a vue component, but why it is not loading into the app? Thanks for the help.

This is the component I'm using the markdown in:

<template lang="pug">
page(title="Trademark" subtitle="Learn about the guidelines for Cosmos trademark usage.")
  text-container
    page-content
</template>

<script>
import PageContent from "content/md/trademark.md"
import Page from "common/NiPage"
import Part from "common/NiPart"
import TextContainer from "common/NiTextContainer"
export default {
  name: "page-design-trademark",
  metaInfo: { title: "Trademark" },
  components: {
    Page,
    Part,
    TextContainer,
    PageContent
  }
}
</script>
QingWei-Li commented 6 years ago

Your webpack config has an error:

    config.module
      .rule("md")
      .test(/\.md/)
      .use("vue-loader")
      .loader("vue-loader")
+     .end()
+     .use("vue-markdown-loader")
      .loader("vue-markdown-loader/lib/markdown-compiler")
      .tap(options => {
        raw: true
      })
nylira commented 6 years ago

Thank you so much! That worked. Do you think it's worth including in the README?

QingWei-Li commented 6 years ago

Sure, can you help?

myronliu347 commented 6 years ago

Build is error

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 3)
Cannot read property '__vueMarkdownOptions__' of undefined

should set parallel: false

can`t use in thread-loader ?

yolinsoft commented 5 years ago

Build is error

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 3)
Cannot read property '__vueMarkdownOptions__' of undefined

should set parallel: false

can`t use in thread-loader ?

Set parallel: false in vue.config.js