Nuxt.js: Adding .md loaders to webpack

[scottsandersdev]

Hello, I've just started diving into nuxt and one thing I'm tasked with is finding a way to pull markdown files with front matter into nuxt.
I've found a couple good loaders for webpack, but when I attempt to use them I get an error:

This relative module was not found:
* ../content/about.md in ./store/index.js

The path is correct, because if I change the extension of the file, it loads fine. I found several solutions to loading markdown+front-matter, but none of them worked with nuxt.

here's my build config after adding https://github.com/matthewwithanm/markdown-with-front-matter-loader to my packages.
build: { loaders: [ { test: /\.md$/, loaders: ['markdown-with-front-matter'] }, ], }

Please let me know of any known solutions.
Thanks,

• Scott

_{This question is available on Nuxt.js community (#c937)}

[scottsandersdev]

thanks @alexchopin, I think this actually makes more sense as a bug, as Nuxt suggests webpack loaders can be easily integrated with its current ecosystem, but 3 that I tried have failed.

[pi0]

Hi. You can use this module with 1.x version of nuxt: https://github.com/nuxt-community/modules/tree/master/modules/markdownit for front-matter integration there is no module but can be implemented easily with similar steps :) Feel free opening an Issue/PR on modules repo to request it if meta loading is also needed. Also here is an example of using markdown-loaders without need to modules.

[scottsandersdev]

For anyone following up on this issue later, markdown-with-front-matter-loader can be used with nuxt, but you can't follow the documentation for the loader, as it leaves off the -loader suffix. Make sure, if using this loader to update nuxt config like so(including the -loader part) -

    loaders: [
      {
        test: /\.md$/,
        loaders: ['html-loader', 'markdown-with-front-matter-loader']
      },
    ],

Also @pi0, really appreciate the timely response. Couple thoughts on your solution -

1. Most people will want to use the released and stable version of a framework or platform, so it doesn't resolve an issue to ask someone to use an unreleased and unstable version (v 1.x).
2. The proposed solution still doesn't resolve the issue of getting front matter loaded, so I'm not sure marking it as 'closed' is sufficient for the issue.
3. Nuxt doesn't provide sufficient webpack error forwarding. The only way I was able to resolve this issue was to create a new project and test webpack outside of nuxt. Only then was I able to see an error / debug message that helped me resolve.

[pi0]

Thanks @scottsandersdev . Really useful tips :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.