How to chain webpack-loader

[DrSensor]

Do you want to request a feature or report a bug?
bug

What is the current behavior?
I'm trying to chain loader like in https://github.com/tuchk4/storybook-readme#webpack-configuration-for-react-storybook by using extendWebpack like this:

  extendWebpack (config) {
    config.module.rule('markdown')
      .test(/\.md$/)
      .use('md')
      .loader(require.resolve('html-loader'))
      .loader(require.resolve('markdown-loader'))
      .loader(require.resolve('raw-loader')) // I add this for debugging
  },

However it only output the result from raw-loader. And when I change it to:

  extendWebpack (config) {
    config.module.rule('markdown')
      .test(/\.md$/)
      .use('md')
      .loader(require.resolve('html-loader'))
      .loader(require.resolve('markdown-loader'))
  },

It give me error

./README.md
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <h1 id="my-component">my-component</h1>
| <blockquote>
| <p>A Vue.js project</p>
 @ ./.storybook/config.js 7:0-34
 @ multi ./node_modules/poi/app/dev-client.es6 ./.storybook/config.js

Seems like it only output the last loader

What is the expected behavior?
It output string from markdown file. For example:

import Readme from '../README.md'
// output -> '<h1>title</h1>blablabla'

Please mention other relevant information such as the browser version, Node.js version, Poi version and Operating System.
Poi v9.6.12
Node v8.9
OS Ubuntu 16.04

[egoist]

This is more of a webpack-chain question.

You use .use to give name to a loader so you can find it later by the name, it should look like this:

	.use('html')
		.loader(require.resolve('html-loader'))
		.end()
	.use('markdown')
      .loader(require.resolve('markdown-loader'))

↓↓↓

use: [
	{ loader: require.resolve('html-loader') },
	{ loader: require.resolve('markdown-loader') }
]

[sinchang]

have the same problem with use markdown-to-vue-loader

config: https://github.com/sinchang-bot/markdown-to-vue/blob/master/poi.config.js

error:

(9,20): error TS2307: Cannot find module '../README.md'.
Error in ~/gpm/github.com/vue-ts-example/src/App.vue

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div class="readme"><h1>vue-ts-example</h1>
| <p>Minimal Vue + TypeScript example, using <a href="https://github.com/egoist/poi">Poi</a>.</p>

@egoist Can you help me look it?

[egoist]

@sinchang you should add vue-loader to that rule

[sinchang]

still doesn't work use config

extendWebpack(config) {
    config.module.rule('markdown')
      .test(/\.md$/)
      .use('markdown-to-vue')
        .loader('markdown-to-vue-loader')
        .options({})
        .end()
      .use('vue')
        .loader('vue-loader')
        .end()
  }

new error message:

(9,20): error TS2307: Cannot find module '../README.md'.
Error in ~/gpm/github.com/vue-ts-example/src/App.vue

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <div class="readme"><p>import normalizeComponent from &#x201C;!./node_modules/vue-loader/lib/runtime/component-normalizer&#x201D;
| /* script <em>/

[egoist]

@sinchang eh you should reverse the order of loaders.

[sinchang]

confused...

doesn't work in the project that creates by vue-ts-example

when using create-vue-app to create the project, that works.

[sinchang]

My fault

need to add below code to vue-shims.d.ts

declare module "*.md" {
  const markdown: any
  export default markdown
}

Thank you for your patience. @egoist

[github-actions]

This issue has been marked as Stale, it will be closed in a week if there's no furthur activity.