CODEWITHSUNDEEP
reactjswebpackr-markdown
Birish
Birish

Reputation: 5822

How to render a foo.md markdown file in react?

I have several .md files (containing long texts) and I want to render them through react. I tried to use markedown-it but the loader returns an error. Here is the webpack.config.js file:

var path = require('path');
var webpack = require('webpack');
var subscript = require('markdown-it');
var superscript = require('markdown-it');

module.exports = {
    entry: ['./src/first.jsx'],
    devtool: 'cheap-module-eval-source-map',
    output: { path: __dirname+"/app", filename: 'bundle.js' },
    module: {
        loaders: [
            {   test: /\.jsx?$/,
                loader: 'babel-loader',
                query: { presets: ['es2015', 'react'] },
                include: path.join(__dirname, 'src')
            },
            {   test:   /\.md/,
                loader: 'markdown-it'
            }
        ]
    },
    'markdown-it': {
        preset: 'default',
        typographer: true,
        use: [subscript, superscript]
    }
};

Is there something wrong with that file? How else I can add my *.md files to react?

After reading http://www.shoutinginfrench.com/today-i-made-react-load-markdown/ I tried to use markdown-loader. Following that, I added this to webpack.config file:

{   test: /\.md$/,
   loader: "html!markdown"
}

which worked with no problem. Then I tried to add the markdown file to the react component as follow: 

import React from 'react';
import { Link } from 'react-router'
import markdownFile from './test-file.md';
 export const Test = React.createClass({
    rawMarkup(){
         return { __html: markdownFile };
     },
     render() {
         return (
             <div className="something">
                 <div className="row">
                     <div className="col-10">
                         <div dangerouslySetInnerHtml={this.rawMarkup()} />
                     </div>
                 </div>
             </div>
         );
     }
 });

But I'm getting the following error:

ERROR in ./src/components/tst.jsx
Module not found: Error: Cannot resolve module 'html' in /Users/..../src/components
 @ ./src/components/tst.jsx 14:15-39

How can I fix it?!

Upvotes: 3

Views: 6234

Answers (1)

Faye Zhang
Faye Zhang

Reputation: 61

add { test: /\.md$/, loader: "html!markdown" },{ test: /\.json$/, loader: "json" } to your webpack.config.js .

npm install react-markdown --save-dev

Upvotes: 2

Related Questions