Skip to content

Error with Webpack 4 and Vue Loader 15 #44

Closed
@DavidRouyer

Description

@DavidRouyer

Upgrade the dependencies of your package.json like this:

{
  "name": "vue-markdown-loader",
  "version": "2.4.1",
  "description": "markdown file to vue component loader.",
  "main": "index.js",
  "scripts": {
    "dev": "cd example && webpack-dev-server --inline --hot --port 8888 --open"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/QingWei-Li/vue-markdown-loader.git"
  },
  "keywords": [
    "vue",
    "markdown",
    "webpack",
    "loader"
  ],
  "author": "qingwei-li <qingwei.li@gmail.com>",
  "license": "WTFPL",
  "bugs": {
    "url": "https://github.com/QingWei-Li/vue-markdown-loader/issues"
  },
  "homepage": "https://github.com/QingWei-Li/vue-markdown-loader#readme",
  "dependencies": {
    "cheerio": "^0.20.0",
    "highlight.js": "^9.4.0",
    "loader-utils": "^1.1.0",
    "markdown-it": "^8.4.0"
  },
  "peerDependencies": {
    "vue-loader": ">=10.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^7.1.3",
    "babel-preset-es2015": "^6.16.0",
    "css-loader": "^0.28.11",
    "github-markdown-css": "^2.3.0",
    "style-loader": "^0.21.0",
    "vue": "^2.0.3",
    "vue-loader": "^15.0.10",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

and import the Vue Loader plugin (it's required now) in your webpack.config.js:

var resolve = require("path").resolve;
var webpack = require("webpack");
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: "./src/entry.js",
  output: {
    path: resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "build.js"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.md$/,
        loader: resolve(__dirname, "../index.js"),
        options: {}
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

You'll get an error like that: Component template requires a root element, rather than just text

Activity

samchen08

samchen08 commented on May 17, 2018

@samchen08

看来要大神来解决下了

imcamo

imcamo commented on May 22, 2018

@imcamo

看来这个包已经放弃维护了

zdliuccit

zdliuccit commented on May 29, 2018

@zdliuccit

放弃维护了么

added 2 commits that reference this issue on Jun 7, 2018
myronliu347

myronliu347 commented on Jun 13, 2018

@myronliu347

希望能给出解决方案, 想用vue-cli 3.0的版本创建项目

imcamo

imcamo commented on Jun 16, 2018

@imcamo

使用 vue-md-loader 吧

QingWei-Li

QingWei-Li commented on Jul 5, 2018

@QingWei-Li
Owner

vue-loader 15 的逻辑重构了,不过用下面的用法兼容

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: './index.js',
    output: {
        filename: 'out.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
			// 👇
            {
                test: /\.md$/,
                loaders: ['vue-loader', 'vue-markdown-loader/lib/markdown-compiler.js']
            }
			// 👆
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

调整下,应该是下面这样

{
test: /\.md$/,
    use: [
        {
            loader: 'vue-loader'
        },
        {
            loader: 'vue-markdown-loader/lib/markdown-compiler',
            options: {
                raw: true
            }
        }
    ]
}
Lemenxzy

Lemenxzy commented on Jul 13, 2018

@Lemenxzy

可是这样的话。vue-markdown-loader 的 options 怎么设置

EPSON-LEE

EPSON-LEE commented on Jun 5, 2019

@EPSON-LEE

可是这样的话。vue-markdown-loader 的 options 怎么设置

{
        test: /\.md$/,
        use: [
          {
            loader: 'vue-loader'
          },
          {
            loader: 'vue-markdown-loader/lib/markdown-compiler',
            options: {
              raw: true,
              preventExtract: true,
              use: [
                [
                  require('markdown-it-container'),
                  'demo',
                  {
                    validate: function(params) {
                      return params.trim().match(/^demo\s+(.*)$/)
                    },

                    render: function(tokens, idx) {
                      if (tokens[idx].nesting === 1) {
                        // 1.获取第一行的内容使用markdown渲染html作为组件的描述
                        let demoInfo = tokens[idx].info
                          .trim()
                          .match(/^demo\s+(.*)$/)
                        let description =
                          demoInfo && demoInfo.length > 1 ? demoInfo[1] : ''
                        let descriptionHTML = description
                          ? markdownRender.render(description)
                          : ''
                        // 2.获取代码块内的html和js代码
                        let content = tokens[idx + 1].content
                        // 3.使用自定义开发组件【DemoBlock】来包裹内容并且渲染成案例和代码示例
                        return `<demo-block>
                        <div class="source" slot="source">${content}</div>
                        ${descriptionHTML}
                        <div class="highlight" slot="highlight">`
                      } else {
                        return '</div></demo-block>\n'
                      }
                    }
                  }
                ]
              ]
            }
          }
        ]
      }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @DavidRouyer@samchen08@QingWei-Li@myronliu347@EPSON-LEE

        Issue actions

          Error with Webpack 4 and Vue Loader 15 · Issue #44 · QingWei-Li/vue-markdown-loader