React-markdown: Including external .md files

[russellbits]

I have tried to include static markdown files, but all this module appears to do is present the file reference rather than the content of the file. For instance,

import React from 'react';
import ReactDOM from 'react-dom';
import ReactMarkdown from 'react-markdown'

const content = require('./content/thinstyle.md')

ReactDOM.render(
  <ReactMarkdown source={content} />,
  document.getElementById('root')
);

Is there some other method in this situation to stream the contents of the file. I'm not aware of any other include methods in Javascript.

[russellbits]

Ok. I see what I'm doing wrong. The markdown doesn't get compiled into the production bundle the way I thought. I thought there was a way to compile the markdown into the javascript bundle. Is that possible? If not, I guess this has to be an ajax call.

[rexxars]

You can use raw-loader to convert a markdown file to a string. Install it and enable it in your webpack config, something like the following:

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        use: 'raw-loader'
      }
    ]
  }
}

[russellbits]

Hey, thanks! I know that wasn't exactly an issue with react-markdown, so thanks for the hint!

[rexxars]

Happy to help ☺️

[zhanglinge]

This probs trouble me a lot, may I know what's your solution eventually? Did you use any other package?

[wellenzhong]

@zhanglinge
I use the 'file-loader' instead.

1. install the file-loader and config your webpack.config.js file;
2. import your .md file to your page;now,you can get the .md file path;
3. fetch your .md file and get the content of your .md file.

const content = require('../assets/doc/agreement.md') .... componentDidMount() { fetch(content).then(response => { return response.text() }).then(text => { console.log(text) this.setState({ agreementContent: text }) }).catch(err => { console.log(err) }) }
you can also get for help from here:https://stackoverflow.com/questions/42928530/how-do-i-load-a-markdown-file-into-a-react-component

[zhanglinge]

@wellenzhong I see, many thanks.

[EAT-CODE-KITE-REPEAT]

Is it possible to fetch markdown files from github repo's into my react website?

[Beamanator]

Is it possible to fetch markdown files from github repo's into my react website?

I successfully got this running in my functional component, hope it helps!

    const [mdText, setMdText] = useState('');

    useEffect(() => {
        fetch("https://raw.githubusercontent.com/Beamanator/fdi/master/README.md")
            .then((response) => {
                if (response.ok) return response.text();
                else return Promise.reject("Didn't fetch text correctly");
            })
            .then((text) => {
                setMdText(text);
            })
            .catch((error) => console.error(error));
    });

[jackdolgin]

My goodness @Beamanator you have no idea how much this helps!