Error with Webpack 4 and Vue Loader 15

[David Rouyer]

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 <[e-mail]>",
  "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

[kenny.chen]

看来要大神来解决下了

[camo]

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

[秋风暮霞惋红曲]

放弃维护了么

[myron]

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

[camo]

使用 vue-md-loader 吧

[cinwell.li]

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
            }
        }
    ]
}

[lemen.xu]

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

[Lee Jiahao]

可是这样的话。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'
                      }
                    }
                  }
                ]
              ]
            }
          }
        ]
      }