Storybook: Import markdown.md for notes "Cannot find module"

[svdsande]

Describe the bug
I want to use the notes addon to display relevant information about my component using markdown, see code below.
~~~js
import mdNotes from './card.component.notes.md';

storiesOf('Atoms/Card', module)
.add('Default with notes', () => ({
component: CardComponent
}), {
notes: mdNotes
}
);
~~~
Unfortunatly this results in TS2307: Cannot find module './card.component.notes.md'.

To Reproduce
Steps to reproduce the behavior:

1. Create a new story
2. Create a markdown file with some content
3. Import markdown file in your story
4. See error

Expected behavior
Markdown file is included and content is correctly rendered in the notes tab.

Code snippets

_card.component.notes.md_
~~~md

Card component

This component uses the Angular Material library.
~~~

_typings.d.ts_
~js
declare module '*.md' {
const content: string;
export default content;
}
~

_tsconfig.json_
~js
"typeRoots": [
"node_modules/@types",
"node_modules/@types","./typings.d.ts"
],
~

System:

• OS: Windows 10 Pro
• Device: Lenovo Thinkpad
• Browser: Firefox
• Framework: Angular
• Addons: Notes
• Version: 5.0.5

[shilman]

Are you using a custom webpack config for storybook? If so, can you share it?

[kroeder]

Do you use angular workspaces? We do use md files in our angular mono repo and also had a lot of trouble using md files

[kroeder]

Currently, there's no out-of-the-box support for md files in Angular Storybook (maybe every ViewLayer using TypeScript)

In my companies project we simply added it to src/typings.d.ts and it worked (even though it was shown as an error in my IDE)

I suggest that we add out-of-the-box support

Before that I will try to figure out a working solution for your repo @svdsande
Do you have a reproduction repo or can you give me more details about your project structure?

• Do you use a mono-repository structure?
  
  
  
  • If yes, the built in angular-cli mono-repo or maybe nrwl / nx?)
  
  
  • If yes, do you removed the initial app using --createApplication=false ?
  
  

[kroeder]

I just opened a PR with a fix, just follow my changes
https://github.com/storybooks/storybook/pull/6444/files

It works in every possible scenario for me, can you verify that?

1) Add typings.d.ts in .storybook

declare module '*.md' {
  const content: string;
  export = content;
}

2) Add it to files in .storybook/tsconfig.json

{
  "extends": "../src/tsconfig.app.json",
  "compilerOptions": {
    "types": [
      "node"
    ]
  },
  "exclude": [
    "../src/test.ts",
    "../src/**/*.spec.ts",
    "../projects/**/*.spec.ts"
  ],
  "include": [
    "../src/**/*",
    "../projects/**/*"
  ],
  "files": [
    "./typings.d.ts"
  ]
}

[svdsande]

Are you using a custom webpack config for storybook? If so, can you share it?

Currently I don't use a custom webpack config.

[svdsande]

@kroeder your solution works like a charm! Thanks for the help! 👍

[shilman]

Shiver me timbers!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.23 containing PR #6444 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[kushalmahajan]

I've the same issue. Difference is that the release PR is not working for me. I'm on version ^5.2.1 for @storybook/addon-notes

[guikeller]

An alternative solution for it - at the root of the project:
npm i marked

On your story - Import the MD file and 'marked' as following:

import * as marked from 'marked';
const componentNotes = require('./1-HeroSearch.stories.md').default;

Use 'marked' to read/parse for you and display as markdown:

    {
      notes: {
        markdown: marked(componentNotes)
      }
    }

Ta-da it works! :smiley:
Good luck :+1:

[JacekKosciesza]

This worked for me (https://stackoverflow.com/a/56659180/602860):

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

declare module "*.md";

[gogakoreli]

@kroeder Your change works just fine. Only issue is that VSCode still thinks that there is the same error Cannot find module markdown.md when hovering over the import line: import markdown from 'markdown.md'. What would you suggest for that?

[tamilsweet]

Any solution to make VSCode happy and not show the error Cannot find module markdown.md when hovering over the import line: import markdown from 'markdown.md'.

[timtos]

I have the same problem with vs code. I "fixed" it now by adding the line

// @ts-ignore: md file and not a module
import markdown from './myFileName.md';

That works but is not very nice, of course, as one needs one extra line.