create-react-app markdown-loader for webpack

Question

I've cloned the create-react-app and I would like to use the webpack plugin markdown-loader. Can someone please advise me how I would modify the webpack.config.dev.js to do so. Thanks

score 3 · Answer 1 · answered Nov 01 '20 at 18:37

3

If you don't want to eject out of create-react-app, it's actually fairly simple to do with loader directives.

Install markdown-loader to turn the markdown into HTML
Install html-loader to be able to load HTML into JS

Then:

import YourMarkdown from '!html-loader!markdown-loader!./YOURFILE.md'

export default function MarkdownComponent() {
  return <div dangerouslySetInnerHTML={{ __html: YourMarkdown }} />
}

answered Nov 01 '20 at 18:37

fny

31,255
16
96
127

After taking this approach with create-react-app, I hit this error: ERROR in src\views\RevisedLayout.jsx Line 31:1: Unexpected '!' in '!html-loader!./revised-layout.html'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax I was able to wrokaround that by including: /* eslint import/no-webpack-loader-syntax: off */ (as per this answer) https://stackoverflow.com/questions/45443274/webpack-2-expected-error-using-with-import – Diarmid Mackenzie Feb 02 '22 at 17:04

score 0 · Answer 2 · answered Jul 31 '16 at 11:34

Taken from Dan Abramovs' post here: https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

All the build settings are preconfigured and can’t be changed.

If you wish to modify any of the settings you can Eject from the app.

“Ejecting” lets you leave the comfort of Create React App setup at any time. You run a single command, and all the build dependencies, configs, and scripts are moved right into your project. At this point you can customize everything you want, but effectively you are forking our configuration and going your own way.

npm run eject will cause all the config options to be moved over to your application giving you full control over the config. - This is a one way process.

Hi Gerraint, I should of said that I have already ejected from the app. Its more a question of how do I implement using markdown templating with react and webpack? — BigNom, Aug 13 '16 at 06:27

create-react-app markdown-loader for webpack

2 Answers2