React.js load markdown file from system as string

Question

I would like to load a markdown file from the current directory as a string, use case:

import { State } from "markup-it"             ;
import markdown  from "markup-it/lib/markdown";
import bio  from './Bio.md'


const mdParser = State.create(markdown);
const bio_o = mdParser.deserializeToDocument(bio);


// tried this next: but cannot import files system because react stubbed it out
const fs = require('fs');

When I import bio from './Bio.md' I get path to file, not a string format. So next I try using the file system fs a la : require file as string but apparently fs has been stubbed out by react. So now I am completely stumped in terms of how I can import a file from the file system as a string. Am I missing something conceptually here? is it because I'm on the client side?

This issue has some information, you might have to eject if you're using create-react-app and modify the web.config to use a raw loader and use it's syntax in your import. — Jason Goemaat
– Jason Goemaat, Commented Jul 4, 2018 at 3:20

Joseph Sikorski · Accepted Answer · 2018-07-04 19:32:20Z

2

If you're fine bundling the markdown text in with your client app code, you can just stick raw-loader into your setup and tell webpack to apply it to anything ending matching /\\.md$/i, that would let you use mdParser on the client side. This presumes of course that Bio.md is in the same folder as this JS file during build time.

If you want the client to load the markdown from the server and parse it then, you're back to what Rohith Murali said about fetch/axios.

Edit: Setup

Setting up raw-loader to do this is really easy, as shown right in their readme:

Installation is thankfully straight forward, unlike some modules they didn't need to do anything funny with the name.

npm install raw-loader --save-dev

Then you configure webpack to load markdown files using the newly installed loader:

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // new rule: anything ending with ".md" is loaded with raw-loader
      {
        test: /\.md$/i,
        use: 'raw-loader'
      },
      // any other rules...
    ],
    // ...
  },
  // ...
}

Then just import your MD file as usual and get back a string:

import bio from './Bio.md';
const bio_o = mdParser.deserializeToDocument(bio);

edited Jul 4, 2018 at 19:32

answered Jul 4, 2018 at 3:44

Joseph Sikorski

7256 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xiaolingxiao Over a year ago

I think I will bundle the md files with the JS file during build time. could you provide a more fleshed out example please.

Rohith Murali · Accepted Answer · 2018-07-04 03:11:31Z

2

Yes. I think you are missing something conceptually. When you build a react application and the user's browsers try to run your js the filesystem will be refering to the user's machine. But what you actually want is a file residing in the static server. Two things can be done,

Eigther you can add the file to your src folder and do an import
Or you can do a fetch/axios call to get the file from your static server, in which case you will get the data in the call back function of your fetch/axios call

answered Jul 4, 2018 at 3:11

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

Collectives™ on Stack Overflow

React.js load markdown file from system as string

2 Answers 2

Edit: Setup

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit: Setup

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related