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

Solution 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

Solution 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

Solution 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.

Solution 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';

View more solutions

Comments

[toskv]

markdown is not json, you should probably load it using an actual http request.

[Lokesh Daiya]

I know markdown is not json. I just referred that solution and implemented for markdown files

[Vassilis Pits]

@LokeshDaiya did you found any solution on this already?

[Lokesh Daiya]

If you see in typescript changelog 2.0 github.com/Microsoft/TypeScript/wiki/… they have introduced "Wildcard character in module names"

[Mitch]

I stand completely corrected, after looking at that link @LokeshDaiya. It does support non-code imports, you just have to specify the relevant content type and pattern in the module declaration.

[Lokesh Daiya]

I tried this solution but got this erro module.js:472 throw err; ^ Error: Cannot find module './README.md!txt'

[Mitch]

It's working for me. Are you still putting the declare module statement in your typings.d.ts file and the import statement in your regular *.ts code?

[Lokesh Daiya]

My typing.d.ts code declare module "*!txt" { const value: any; export default value; } and TS file code is import readme from "./README.md!txt"; console.log(readme);

[Lokesh Daiya]

I have created a plnkr as well plnkr.co/edit/7qT4Tu?p=preview there also its not working

[Drenai]

I couldn't get this to work with a new Angular CLI 8.2.0 project, TypeScript 3.5.2

[TheAngularGuy]

Thanks for the answer, this works the best for me, without the raw-loader!. I'm working with Nx, and the file had to be in /src folder, I wonder why tho?

[Drenai]

@TheAngularGuy Might need to be in src because that's where tsconfig.app.json points to. I couldn't get it working without raw-loader!. Are you using Anuglar v8?

[TheAngularGuy]

Yes, Angular 8, but inside a library that i share with multiple apps

[drewkiimon]

This did it for me!

[JJuice]

To be clear: 'root directory' refers to the src folder, not the directory above containing the package.json

[Royer Adames]

I'm in Angular 13. This works to a point. I get an error: Error: Module not found: Error: Can't resolve 'raw-loader'.