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

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

Instructor: [00:00] Create a markdown file. We'll call this page.md, add some content to it. I'm using markdown page and a content goes here. Then, we can try and load it, we'll say import page from page.md and let it fail, because we don't have a right loader.

[00:22] To add the loader, we'll create our poiconfig.js to our module exports, and there is a property called webpack which passes in the config. Then, we modify the config here and return the config. We want to add a rule on the module, so config module rules, push, and the rule is going to look like this. Test our testing markdown files.

[00:48] The loaders you're going to use are the react-markdown-loader is going to pass into the pebble loader. Make sure and install the react-markdown-loader. We can stop this, start it up again. Now, there are no errors. Instead of just importing it, we can go ahead and use it as a react component. Say, page get save and you can see that my markdown file is being used as a react component.