If you are working with React and Typescript:

Start by creating a globals.d.ts file in the main directory (e.g. src/) with the code snippet below:

declare module "*.md";

After that, make sure to import it in this manner:

import readme from "../README.md" // Replace this path with the actual location of your README.md file

Using Angular 8 and TypeScript 3.5.2

To implement a custom type definition, create a file named globals.d.ts within the src folder. Remember, it must be located in the src directory for proper functionality.

declare module '*.md';

When importing in your component or service, use the following syntax:

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

In the above example, page.md is situated at the same level as the component where it's being imported. This method works seamlessly with both the serve command and build --prod. If you are testing in live reload mode, ensure to restart your server to see the changes take effect.

For importing JSON files, there's a more streamlined process available. Refer to the TypeScript 2.9 Release Documentation for more information.

It's worth noting that the file does not necessarily have to be named globals.d.ts; you can choose any name you prefer, although following the convention is recommended.

When looking at the linked example, it's important to note that they are importing JSON, not Markdown. The reason they can import JSON successfully is because valid JSON is also considered valid JavaScript/TypeScript. Conversely, Markdown is not compatible with TypeScript, so attempting to import it in the same way will not work as expected.

If there is a need to access the Markdown file dynamically during runtime, one option is to make an AJAX request to fetch its contents. Alternatively, if embedding the Markdown directly into the JavaScript code is preferred, a build script will be necessary. While you mentioned that Webpack is not being used, it has the capability to accomplish this by creating a module rule linking "/\.md$/" with "raw-loader". A similar approach will be required using another tool.

Edit:

It appears there is always something new to discover. As pointed out by the original poster in the comments, TypeScript 2.0 now supports importing non-code resources.

To try this out, consider the following:

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

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

After implementing this setup, the variable readme should contain a string with the content of README.md.

In my experience, I encountered difficulties with the following setup: Vite + React + Typescript

Here's How I Solved It

I found a solution by creating a custom plugin in vite.config.ts to extract raw content from markdown files:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react(),
    {
      name: "markdown-loader",
      transform(code, id) {
        if (id.slice(-3) === ".md") {
          // Extract raw content for .md files
          return `export default ${JSON.stringify(code)};`;
        }
      }
    }
  ]
});

Next Step

To ensure typescript imports markdown files correctly, add the following code to vite-env.d.ts

declare module "*.md";

Unfortunately, @Mitch's solution was not effective in my case. After some research, I discovered that for angular v7, a simple syntax like this did the trick:

import * as docs from 'raw-loader!./documentation.md';

If you are working with React and Typescript, follow these steps:

Locate the file src/react-app-env.d.ts containing the code below:

declare module "*.md";

Then import it in this manner:

import readme from "../README.md" // Adjust the path to your README.md accordingly

Aside from what others have suggested, it's important to include a fetch request in the process as well

Here are the overall steps that need to be followed:

Step 1: Create a file markdown.d.ts and insert the following code:

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

Step 2: Insert 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))
}, [])

When working with Nx, I found a solution that avoids the need to add a file to every project or clutter my root and src folders with config files. Instead, I create a .d.ts file in a designated location and include it in the tsconfig "files" entry. Here's an example:

Create a file named config/markdown.d.ts with the following content:

declare module '*.md';

In my libs/my-lib/tsconfig.lib.json, I include the path to markdown.d.ts in the "files" array like this:

"files": ["../../config/markdown.d.ts"]

Although I still need to update the tsconfig "files" section for projects using markdown files, I find it preferable to duplicating .d.ts files across multiple locations. If you're not utilizing Nx, this may not be a concern for you.

This approach can be extended to other file extensions by creating separate .d.ts files for each extension or consolidating them into a single .d.ts file based on your requirements.