Loading an MD file with react hooks in Meteor

help
1

Do you see anything wrong with this code?

import React, {useEffect, useState} from 'react';
import marked from 'marked';

const ChangeLog = () => {
    const [markdown, setMarkdown] = useState('');
    useEffect(() => {
        fetch('./CHANGELOG.MD')
            .then(response => {
                return response.text()
            })
            .then(text => {
                setMarkdown(marked(text));
            })
    });
    return (
        <section>
            <article dangerouslySetInnerHTML={{__html: markdown}}></article>
        </section>
    )
}

export default ChangeLog;

where CHANGELOG.MD is in the same directory as ChangeLog component.

EDIT: I want to create a component with react hooks that loads md files.

2

mmhhh could it be that MD file is not included into the bundle correctly?

3

They usually aren’t. You could try moving it to somewhere in the public folder, which is always included (on the server) and available for fetching, and then fetching it without relative path.

4

I was thinking using Assets and create a method to get the file on the client

5

SOLVED
Assets were the way to make it. On the client:

import React, {useEffect, useState} from 'react';
import marked from 'marked';
import {Meteor} from 'meteor/meteor';

const ChangeLog = () => {
    const [markdown, setMarkdown] = useState('');
    useEffect(() => {
       Meteor.call('getAsset', ('md/CHANGELOG.md'), (err, res) => {
           if (err) return console.log('Asset retrieval error', err);
           setMarkdown(marked(res));  
       });
    });
    return (
        <section>
            <article dangerouslySetInnerHTML={{__html: markdown}}></article>
        </section>
    )
}

export default ChangeLog;

on the server:

import {Meteor} from 'meteor/meteor';
import { check } from 'meteor/check';

Meteor.methods({
    getAsset(path) {
        check(path, String);
        const ret = Assets.getText(path);
        return ret;
    }
})
6

it looks like I cannot call Meteor.call inside useEffect