[Poi] Use Markdown as React Components by Adding a Webpack Loader to Poi

Poi ships with many webpack loaders included, but you may run into scenarios where you'll need to customize and add your own. This lesson covers adding react-markdown-loader to Poi to load Markdown files as React components.

 

Install:

npm i -D react-markdown-loader

 

poi.config.js:

module.exports = {
    webpack(config) {
        config.module.rules.push({
           test: '/.md$/',
           loaders: [
               'babel-loader',
               'react-markdown-loader'
           ]
       })

        return config;
    }       
}

 

import Page from './Page.md'
import {render} from 'react-dom';

render(
  <Page></Page>,
   document.getElementById('app')      
);