How to import markdown(.md) file in typescript

Question

I am trying to import readme files in typescript but getting "error module not found"

My TS code

import * as readme from "./README.md"; // here i am getting error module not found

I also tried: typings.d.ts

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

I found that in typescript 2.0 https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#typescript-20 they have introduced "Wildcard character in module names" using that we can include any extension file.

I just followed example https://hackernoon.com/import-json-into-typescript-8d465beded79 which is for json files I followed same for markdown files but no success.

I am not using webpack and any loader, so I just wanted it only from typescript

Answer 1

For those using React with Typescript:

Create a globals.d.ts file in your root directory with the following code:

declare module "*.md";

then import it like this:

import readme from "../README.md" // substitute this path with your README.md file path

Answer 2

Angular 8, TypeScript 3.5.2

Create a file globals.d.ts in the src folder (has to be in src to work), add:

declare module '*.md';

In your component or service import with:

import * as pageMarkdown from 'raw-loader!./page.md';

In this case page.md was at the same level as the component I was importing it into. This worked with serve and build --prod also. Make sure to restart your serve if testing it in live reload mode for the first time.

There's a cleaner process for importing json - see the TypeScript 2.9 Release Documentation

Note: you don't have to name the file globals.d.ts, it could be called anything-at-all.d.ts, but that's the convention

Answer 3

In your linked example, they are importing JSON, not Markdown. They are able to import the JSON because valid JSON is also valid JavaScript/TypeScript. Markdown is not valid TypeScript and so importing it like that just isn't going to work out of the box like that.

If you want to access the Markdown file at runtime, then make an AJAX request to retrieve its contents. If you really want it built within your JavaScript itself, then you will need to have some sort of build script. You mentioned you aren't using Webpack, but it will be able to achieve what you're looking for by adding a module rule tying /\.md$/ to raw-loader. You'll need to use some sort of equivalent.

Edit:

It seems you learn something new every day. As OP pointed out in comments, TypeScript 2.0 has support for importing non-code resources.

Try the following:

declare module "*!txt" {
    const content: string;
    export default content;
}

import readme from "./README.md!txt";

The readme value should then be a string containing the contents of README.md.

Answer 4

@Mitch's answer didn't work for me. Using angular v7, I found I could just use this syntax: import * as documentation from 'raw-loader!./documentation.md';

Answer 5

For those using React with Typescript:

find file in src/react-app-env.d.ts file with the following code:

declare module "*.md";

then import it like this:

import readme from "../README.md" // substitute this path with your README.md 

Answer 6

Apart from Other's answers , I need to add a fetch request as well

So, overall steps are :

Step 1 : create a file markdown.d.ts with the code :

declare module '*.md' {
    const value: string; // markdown is just a string
    export default value;
}

Step 2 : Add this code in your desired .tsx file

import data from '<path_to_md_file>.md'

useEffect(() => {
        fetch(data).then(res => res.text()).then(text => console.log(text))
}, [])