Module not found: Error: Can't resolve mdx file #13144

jihea-park · 2020-11-17T01:49:01Z

I got this error

ERROR in ./stories/components/atomic/Button.stories.tsx
Module not found: Error: Can't resolve './Button.stories.mdx' in '/Users/user/Desktop/plasma/order-seller-fe-npay/packages/common/components/stories/components/atomic'
 @ ./stories/components/atomic/Button.stories.tsx 110:43-74
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(tsx|mdx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/core/dist/server/common/polyfills.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

With

Button.stories.tsx

import Button from '../../../atomic/Button';;
import mdx from './Button.stories.mdx';
import React from 'react';

export default {
  title: 'components/atomic/Button',
  component: Button,
  parameters: {
    docs: {
      page: mdx
    } 
  }
};

export const basic = (props) => {
  return <Button {...props}>TEST</Button>;
};
basic.story = { 
  name: 'Basic'
};

Button.stories.mdx

import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as stories from './Button.stories.tsx';

<Meta title="components/atomic/Button" />

# Button

I can define a story with the function imported from CSF:
testetsetsektjksledjflksjkl

<Story story={stories.basic} />

And I can also embed arbitrary markdown & JSX in this file.

How can I add Button.stories.mdx file as docs.

I declared mdx at global.d.ts

declare module '*.mdx' {
  const content: string;
  export default content;
}

The text was updated successfully, but these errors were encountered:

shilman · 2020-11-17T03:20:42Z

Do you have a repro repo you can share?

If not can you share main.js file?

jihea-park · 2020-11-17T03:50:16Z

@shilman

this is my main.js file

const merge = require("webpack-merge");

module.exports = {
  stories: ["../stories/**/*.stories.@(tsx|mdx)"],
  addons: [
    "@storybook/addon-actions",
    "@storybook/addon-links",
    "@storybook/addon-knobs",
    "@storybook/addon-notes",
    "@storybook/addon-viewport",
    "storybook-addon-intl",
    {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,
      },
    },
  ],
  webpackFinal: async (storybookBaseConfig, { configType }) => {
    // Remove the existing css rule
    // 참고: https://github.com/storybookjs/storybook/issues/6083
    //      https://github.com/storybookjs/storybook/issues/6319#issuecomment-477852640
    storybookBaseConfig.module.rules = storybookBaseConfig.module.rules.filter(
      (f) => f.test.toString() !== "/\\.css$/"
    );

    const styleLoaderConfig = {
      loader: "style-loader",
      options: {
        insert: "#style-loader-heaven",
      },
    };
    const cssLoaderConfig = {
      loader: "css-loader",
      options: {
        modules: {
          mode: "global",
          localIdentName: "__[path][name]__[local]--[hash:base64:5]",
        },
      },
    };
    storybookBaseConfig.module.rules[2] = {
      test: /\.css$/,
      use: [styleLoaderConfig, cssLoaderConfig],
    };
    storybookBaseConfig.module.rules[3].exclude = [/\.icon\.(png|gif|svg)$/];
    storybookBaseConfig.module.rules.push({
      test: /\.ts(x?)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            babelrc: true,
            extends: require.resolve("@plasma-fe/common-config/.babelrc"),
          },
        },
        {
          loader: "ts-loader",
        },
      ],
    });
    storybookBaseConfig.module.rules.push({
      test: /\.scss$/,
      exclude: [/\.module\.scss$/, /global\.scss$/],
      use: [
        styleLoaderConfig,
        cssLoaderConfig,
        {
          loader: "sass-loader",
        },
      ],
    });
    storybookBaseConfig.module.rules.push({
      test: /\.module\.scss$/,
      use: [
        styleLoaderConfig,
        {
          loader: "css-loader",
          options: {
            modules: {
              mode: "local",
              localIdentName: "__[path][name]__[local]--[hash:base64:5]",
            },
          },
        },
        {
          loader: "sass-loader",
        },
      ],
    });
    storybookBaseConfig.module.rules.push({
      test: /global\.scss$/,
      use: [
        {
          loader: "style-loader",
          options: {
            // injectType: 'lazyStyleTag',
            insert: "#scoped-global-css-heaven",
          },
        },
        {
          loader: "css-loader",
        },
        {
          loader: "sass-loader",
        },
      ],
    });
    storybookBaseConfig.module.rules.push({
      test: /\.icon\.(png|gif|svg)$/,
      use: [
        {
          loader: require.resolve("url-loader"),
        },
      ],
    });

    storybookBaseConfig.resolve.extensions.push(".ts", ".tsx");
    storybookBaseConfig = merge.smart(
      storybookBaseConfig,
      require("../webpack.sprites.config")
    );

    // Return the altered config
    return storybookBaseConfig;
  },
};

Please help me...

shilman · 2020-11-17T06:00:03Z

What happens when you remove this:

declare module '*.mdx' {
  const content: string;
  export default content;
}

jihea-park · 2020-11-17T06:01:54Z

Same,

ERROR in ./stories/components/atomic/Button.stories.tsx
Module not found: Error: Can't resolve './Button.stories.mdx' in '/Users/user/Desktop/plasma/order-seller-fe-npay/packages/common/components/stories/components/atomic'
 @ ./stories/components/atomic/Button.stories.tsx 110:43-74
 @ ./stories sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^\/]*?\.stories\.(tsx|mdx))$
 @ ./.storybook/generated-stories-entry.js
 @ multi /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/core/dist/server/common/polyfills.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js /Users/user/Desktop/plasma/order-seller-fe-npay/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

even though I remove declare module mdx.

shilman · 2020-11-17T08:04:51Z

Oh, I see what's going on. Take a look at these recipes:

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#mixed-csf--mdx-stories

You're mixing up "CSF Stories with MDX Docs" and "CSF Stories with arbitrary MDX". I'd suggest just following the first recipe.

jihea-park · 2020-11-18T01:51:10Z

@shilman
Oh, I see.
Then I have two questions.

But what should I do if I want to add to storybook written by "CFS Stories with MDX Docs"?
What should I do if I want to use "CSF Stories with arbitary MDX"? Even though I removed <Meta>, still same error occurs.

jihea-park · 2020-11-20T02:57:26Z

@shilman
Sorry to bother you.
But Please answer my questions..
#13144 (comment)

stale · 2020-12-25T18:55:16Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

marvhen · 2021-04-07T10:46:05Z

I have this issue attempting to use the CSF Stories with arbitrary MDX recipe.

My main.js is more out-of-the-box, with simply:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

My Button.mdx file is:

import { Story } from '@storybook/addon-docs/blocks';

# Button

I can embed a story (but not define one, since this file should not contain a `Meta`):

<Story id="example-button--primary" />

And I can also embed arbitrary markdown & JSX in this file.

...and my Button.stories.ts file begins with:

import { Story, Meta } from '@storybook/angular';
import Button from './button.component';
import mdx from './Button.mdx'

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: { backgroundColor: { control: 'color' } },
  parameters: {  actions: { argTypesRegex: 'clicked' }, docs: { page: mdx} }
} as Meta;

I don't have a global.d.ts file but I did try to see what happens when I declare mdx in one...the warning hint disappears in the editor but compilation still fails.

I'm assuming this recipe just is not possible using Typescript, as there is an open issue for it to support .mdx file extensions.. Indeed, I tried changing the .mdx extension to .jsx and added "jsx": "preserve" to my tsconfig.json--this error went away but then I got others.

If this is the case, can I submit a PR that simply states this limitation in the documentation?

shilman · 2021-04-07T13:30:52Z

@marvhen I wonder if one of our typescript wizards can offer a suggestion here. @gaetanmaisse @ndelangen @yannbf @tooppaaa ? ☝️ i'm guessing the workaround for this should be something pretty standard?

gaetanmaisse · 2021-04-07T17:26:34Z

Which version of Storybook are you using @marvhen? Because I think it has been fixed in 6.2
I created a sample project, bare Angular CLI + Storybook CLI, and didn't face any issue.

Repo: https://github.com/gaetanmaisse/storybook-angular-mdx
Commit trying to reproduce the issue: gaetanmaisse/storybook-angular-mdx@0102a09

Maybe I missed something in the commit adding the mdx file?

marvhen · 2021-04-07T21:32:49Z

I am using SB 6.2.2 but after comparing my project to yours it turns out that I need the globals.d.ts file after all.

I guess the reason it didn't work when I first tried it was I had it in the root of the project and it needed to be in the src folder.

Thanks for the help!

gaetanmaisse · 2021-04-08T06:45:40Z

@jiheapark can you give it a try with SB 6.2 too and let me know if you're still facing the issue?

sir-captainmorgan21 · 2022-01-12T01:12:39Z

There are a lot of nuances that are left out of this documentation to actually get things working with storybook and angular: https://storybook.js.org/docs/angular/writing-docs/introduction

@gaetanmaisse @shilman we should probably get the docs updated. On top of this, the docs dont mention anything about compodoc setup either. Took me a good bit of Github issue digging and Googling to figure out

shilman · 2022-01-12T02:57:39Z

@sir-captainmorgan21 thank you, PRs are very welcome! https://storybook.js.org/docs/react/contribute/documentation-updates

sir-captainmorgan21 · 2022-11-29T00:35:39Z

@gaetanmaisse I am still facing this issue with globals.d.ts in the src of the lib and it being listed under include in the tsconfig. Can we get the minimum requirements to get this working? If so Ill open a PR to get this into the docs

jihea-park changed the title ~~Module not found: Error: Can't resolve~~ Module not found: Error: Can't resolve mdx file Nov 17, 2020

shilman added addon: docs mdx PN question / support labels Nov 17, 2020

stale bot added the inactive label Dec 25, 2020

stale bot removed the inactive label Apr 7, 2021

shilman removed the PN label Apr 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module not found: Error: Can't resolve mdx file #13144

Module not found: Error: Can't resolve mdx file #13144

jihea-park commented Nov 17, 2020 •

edited

Loading

shilman commented Nov 17, 2020

jihea-park commented Nov 17, 2020 •

edited

Loading

shilman commented Nov 17, 2020

jihea-park commented Nov 17, 2020

shilman commented Nov 17, 2020

jihea-park commented Nov 18, 2020 •

edited

Loading

jihea-park commented Nov 20, 2020

stale bot commented Dec 25, 2020

marvhen commented Apr 7, 2021

shilman commented Apr 7, 2021

gaetanmaisse commented Apr 7, 2021

marvhen commented Apr 7, 2021

gaetanmaisse commented Apr 8, 2021

sir-captainmorgan21 commented Jan 12, 2022 •

edited

Loading

shilman commented Jan 12, 2022

sir-captainmorgan21 commented Nov 29, 2022

Module not found: Error: Can't resolve mdx file #13144

Module not found: Error: Can't resolve mdx file #13144

Comments

jihea-park commented Nov 17, 2020 • edited Loading

shilman commented Nov 17, 2020

jihea-park commented Nov 17, 2020 • edited Loading

shilman commented Nov 17, 2020

jihea-park commented Nov 17, 2020

shilman commented Nov 17, 2020

jihea-park commented Nov 18, 2020 • edited Loading

jihea-park commented Nov 20, 2020

stale bot commented Dec 25, 2020

marvhen commented Apr 7, 2021

shilman commented Apr 7, 2021

gaetanmaisse commented Apr 7, 2021

marvhen commented Apr 7, 2021

gaetanmaisse commented Apr 8, 2021

sir-captainmorgan21 commented Jan 12, 2022 • edited Loading

shilman commented Jan 12, 2022

sir-captainmorgan21 commented Nov 29, 2022

jihea-park commented Nov 17, 2020 •

edited

Loading

jihea-park commented Nov 17, 2020 •

edited

Loading

jihea-park commented Nov 18, 2020 •

edited

Loading

sir-captainmorgan21 commented Jan 12, 2022 •

edited

Loading