How to import a markdown file in a typescript react-native project?

Question

I have tried to import a markdown file into my typescript react-native project in 2 ways.

import * as readme from "./sample.md"

import readme from "./sample.md"

Both didn't work. So I found a similar issue reported previously and mentioned about making a typings.d.ts file for declaring modules, and i've tried this as well but it still doesn't work.

declare module "*!txt" {
    const value: any;
    export default value;
}

declare module "*.md" {
    const value: any;
    export default value;
}

EDIT: There is no import error on Vscode but on the react-native app itself, it says that it cannot find module './sample.md' as it is only looking for (.native|.ios|.json|.ts etc) files.

Any help would be appreciated, been stuck on this for far too long. Thank you!

Pramod Mali · Accepted Answer · 2020-07-27 08:05:38Z

2

Create one type definition (index.d.ts) file in one of the project directory and put the following code.

declare module "*.md";

Add tsconfig.json -> CompilerOptions -> typeRoots as following

{
     "compilerOptions": {
         ...
         "typeRoots": [ "<types-directory-created-in-#1>", "./node_modules/@types"],
         ...
     }
}

In your component

import React, { useEffect, useState } from 'react';
import readme from 'path/filename.md';

export default function ComponentName() {
    const [md, setMD] = useState("");

    //Use componentDidMount(): if class based component to load md file
    useEffect(() => {
        fetch(readme)
            .then(data => data.text())
            .then(text => {               
                setMD(text);
            })
    }, []);

    return (
        <div>{md}</div>
    )
}

answered Jul 27, 2020 at 8:05

Pramod Mali

1,8281 gold badge19 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

How to import a markdown file in a typescript react-native project?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related