Webpack loader for .md file import for "react-markdown" npm library?

Question

When i import a .md file , it gave me error, saying that it cannot read this particular .md file syntax, I know there needs to be some kind of loader for it to parse the import, but when i looked online there was a loader called 'markdown-loader' which was only for marked npm package.

I am using react-markdown package to read md files

/* eslint-disable react/prefer-stateless-function */
import React, { Component } from 'react';
import ReactMarkdown from 'react-markdown';
import AppMarkdown from './posts/sample.md';

// import PropTypes from 'prop-types';

class CardDetails extends Component {
  constructor() {
    super();
    this.state = { markdown: '' };
  }

  componentDidMount() {
    // Get the contents from the Markdown file and put them in the React state, so we can reference it in render() below.
     fetch(AppMarkdown)
      .then(res => res.text())
      .then(text => this.setState({ markdown: text }));
  }

  render() {
    const { markdown } = this.state;
    return <ReactMarkdown source={markdown} />;
  }
}

CardDetails.propTypes = {};
export default CardDetails;

here's my markdown content sample.md

# React & Markdown App

- Benefits of using React... but...
- Write layout in Markdown!

i could not find package , i looked everywhere, do you know about the loader ? Thankyou

you don't need any webpack plugins for that. Seems like your markdown code is wrong. — demkovych
– demkovych, Commented Jun 29, 2020 at 14:04
I posted example using webpack loader "raw-loader" here stackoverflow.com/a/65744729/1418981 — Vlad
– Vlad, Commented Jan 15, 2021 at 23:12

demkovych · Accepted Answer · 2020-06-29 14:10:32Z

10

Try to use raw-loader:

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

answered Jun 29, 2020 at 14:10

demkovych

9,0553 gold badges23 silver badges27 bronze badges

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

6 Comments

0xAnon Over a year ago

oh seems like raw-loader was commented out in my config lemme build the dll and get back to you

0xAnon Over a year ago

btw this line fetch(AppMarkdown) .then(res => res.text()) .then(text => this.setState({ markdown: text })); seems to get my index.html content and set that content to markdown do you know why , i think i did pretty much everything the library said

demkovych Over a year ago

sorry, I don't know. Try to move your file into the same directory or use require instead.

0xAnon Over a year ago

i moved it in the same directory , checked paths... , but the promise value that is being is returned is the index.html text , i dont know what went wrong, i will debug it more , this is annoying lol

demkovych Over a year ago

Try to use another plugin instead of react-markdown

|

Collectives™ on Stack Overflow

Webpack loader for .md file import for "react-markdown" npm library?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related