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