markdown-loader: how to load a markdown file [file.md] without error

help is wanted

my config (nuxt.config.js)

  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: "html-loader"
          },
          {
            loader: "markdown-loader",
            options: {
              pedantic: true,
              renderer
            }
          }
        ]
      }
    ]
  }

error occur during nuxt command

error in ./assets/markdowns/first.md

Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| some para
| # Marked
|


 @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["G://Experiments//Project//nuxtjs//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/marked.vue 8:0-51
 @ ./pages/marked.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

What is the necessary step to debug

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 15 (4 by maintainers)

Most upvoted comments

As @hellolittleBear mentioned, the full solution for me is:

1. Define the html-loader and markdown-loader in webpack both in server and client part

      rules: [
        // other loaders
        {
          test: /\.md$/,
          use: [
            {
              loader: "html-loader"
            },
            {
              loader: "markdown-loader",
            }
          ]
        },
      ]

2. Import using loaders in path import markFile from '!!html-loader!markdown-loader!./article.md'

3. Bonus: Use markdown-it to render the md file

Rolandisimo on Aug 11, 2019

i think the markdown-loader has some wrong!!!

method 1:

{
        test: /\.md$/, 
        use: ['markdown-loader', 'html-loader']
},

import markFile from './article.md'

it’s wrong: You may need an appropriate loader to handle this file type…

method 2: use inline-loader

import markFile from '!!markdown-loader!html-loader!./article.md'

it’s also wrong… You may need an appropriate loader to handle this file type…

method 3: delete markdown-loader , just use html-loader 、showdown.js， it’s ok !!!

import markFile from '!!html-loader!./article.md'

update:

import markFile from '!!html-loader!markdown-loader!./article.md'

it’s ok… i can’t say anything…

defaultProps on Jun 4, 2019

I am getting the same thing with the same setup as posted by @CharlesKumar, only without markdown-loader options set. It reports that ‘#’ is an unexpected character and that I need an appropriate loader.

I am not using Nuxt and it is happening when running npm run docs

my package.json has the script defined like this "docs": "webpack --config config/docs/webpack.docs.js --mode production"

webpack ^4.23.1, markdown-loader ^5.0.0, html-loader ^0.5.5

simonerlandsen on Apr 3, 2019