Problems loading MDX files when converting to typescript

Describe the bug When converting an existing project and changing a *.stories.js file to a *.stories.tsx file, any mdx pages that were previously used in the story fail to load.

To Reproduce Steps to reproduce the behavior:

1. Add a typescript configuration to a project that uses storybook
2. Change a *.stories.js file to use the .tsx extension
3. Run storybook and any previously used mdx files loaded by that story shouldn’t show up

Expected behavior When converting a story to typescript, the behavior of MDX files should remain the same as when using plain javascript.

Code snippets

// Icons.mdx (shortened)

import { Preview, Story, Props } from '@storybook/addon-docs/blocks'
import { BaseIcon, ToggleIcon, DirectionalIcon } from './BaseIcon'
import { StatusBanner } from '../../storybook-helpers'

<StatusBanner packageName="zion-icon" />

# Zion Icon
<Props of={ToggleIcon} />

// Icons.stories.js

import page from './Icons.mdx'

export default {
  title: 'UI Foundation/Icons',
  component: [],
  parameters: { docs: { page } },
}

System:

Environment Info:
  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.135
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-a11y: ^5.3.13 => 5.3.19 
    @storybook/addon-actions: ^5.3.13 => 5.3.19 
    @storybook/addon-console: ^1.2.1 => 1.2.1 
    @storybook/addon-docs: ^5.3.13 => 5.3.19 
    @storybook/addon-knobs: ^5.3.13 => 5.3.19 
    @storybook/addon-links: ^5.3.18 => 5.3.19 
    @storybook/addon-storysource: ^5.3.13 => 5.3.19 
    @storybook/addon-viewport: ^5.3.13 => 5.3.19 
    @storybook/addons: ^5.3.13 => 5.3.19 
    @storybook/components: ^5.3.13 => 5.3.19 
    @storybook/preset-typescript: ^3.0.0 => 3.0.0 
    @storybook/react: ^5.3.13 => 5.3.19 
    @storybook/theming: ^5.3.13 => 5.3.19 

Additional context The project I’m working in is a monorepo, and all the components that use typescript are functioning as expected outside of storybook.

[danielstocks]

@shilman Thanks that worked! Might be worth mentioning in the migration guide as it’s far from obvious why it doesn’t work if you coming from storybook 5!

[ethancrook99]

@shilman I don’t, but I think I found the source of the issue. I made a pretty big oversight–I left out ts and tsx from the regex that adds stories in my preview.js (I’ve updated it before, but evidently I didn’t commit the changes). So it went from require.context('../packages/icon/src', true, /\.stories\.(js|mdx)$/) to require.context('../packages/icon/src', true, /\.stories\.(js|ts|tsx|mdx)$/). It looks like that fixed the problem.

I also noticed that when I run filtered storybook to only show one package, it creates the same error in /.storybookfiltered by not adding ts and tsx to the require context. I’ll look into that one further and see if there are any config or script changes I need to make to get that working correctly.

Thank you so much for all your help!