[Bug]: Absolute import from MDX does not work

[donaldpipowitch]

Describe the bug

When I import a story with an absolute path it does not work. There is no local build error and the test runner doesn't catch it either. I'm pretty sure it worked in the past. (We also use eslint-plugin-storybook, so an error reported by ESLint would also be fine.)

It's very likely that my configuration doesn't work anymore, but I'd love to know how I can prevent issues like this, because it got unnoticed for quite a while in our Storybook instance.

Reproduction link

https://github.com/donaldpipowitch/storybook-mdx-import-issue

Reproduction steps

See README in https://github.com/donaldpipowitch/storybook-mdx-import-issue.

System

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.1.0 - ~/Library/Caches/fnm_multishells/87624_1721729529550/bin/node
    Yarn: 1.22.22 - ~/Library/Caches/fnm_multishells/87624_1721729529550/bin/yarn
    npm: 10.2.0 - ~/Library/Caches/fnm_multishells/87624_1721729529550/bin/npm
    pnpm: 9.5.0 - ~/Library/pnpm/pnpm <----- active
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.5

Additional context

No response

[greptile-apps[bot]]

Disclaimer This information might be inaccurate, due to it being generated automatically To address the issue with absolute imports in MDX files, follow these steps:

1. Check MDX Import Paths: Ensure that the import paths in your MDX files are correct and absolute paths are properly resolved. For example, in /code/core/src/core-server/utils/__mockdata__/complex/TwoStoryReferences.mdx, verify the paths for A.stories and B.stories.

2. Update Webpack Configuration: Modify the Webpack configuration to support absolute imports. This can be done in your Storybook's main configuration file (e.g., .storybook/main.js). Add the following configuration:

const path = require('path');

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.modules = [
      path.resolve(__dirname, '../src'),
      'node_modules',
    ];
    return config;
  },
};

3. Verify ESLint Configuration: Ensure that eslint-plugin-storybook is correctly configured to catch import errors. Check your ESLint configuration file (e.g., .eslintrc.js) and ensure it includes the Storybook plugin:

module.exports = {
  extends: [
    'plugin:storybook/recommended',
  ],
};

These steps should help resolve the issue with absolute imports in MDX files.

References

/.github/DISCUSSION_TEMPLATE/help.yml /code/core/src/csf-tools/ConfigFile.test.ts /.github/comments/invalid-link.md /.github/comments /code/core/src/core-server/utils/mockdata/errors/NoMeta.stories.ts /code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts /code/addons/docs/src/compiler/index.test.ts /code/core/src/server-errors.ts /code/lib/cli/src/automigrate/fixes/mdx-gfm.ts /.github/DISCUSSION_TEMPLATE/ideas.yml /code/frameworks/web-components-webpack5/src/preset.ts /code/lib/cli/src/automigrate/fixes/mdx-to-csf.test.ts /docs/_snippets/storybook-preview-with-angular-polyfills.md /code/core/src/core-server/utils/mockdata/complex /docs/_snippets/main-config-core-enable-crash-reports.md /code/addons/docs/angular /code/core/src/preview-api/modules/preview-web/PreviewWeb.integration.test.ts /code/core/src/csf-tools/CsfFile.test.ts /code/lib/cli/src/automigrate/fixes/remove-legacymdx1.ts /docs/_snippets/main-config-test-disable-mdx.md /code/lib/codemod/src/transforms/testfixtures/mdx-to-csf/story-function.input.mdx /docs/_snippets/storybook-main-ref-local.md /code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts /docs/_snippets/main-config-test-disable-autodocs.md /docs/writing-stories/mocking-data-and-modules

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

[shilman]

Looks like the issue is that the test runner is only testing stories & not testing docs by default.

We created a way to test docs once upon a time using the VIEW_MODE environment variable. However, I suspect that doesn't work anymore since I think it was written before Storybook 7.0 (back when stories also had docs mode), and the index structure has changed since then.

https://github.com/storybookjs/test-runner/blob/next/src/setup-page.ts#L38

Smoke testing your docs pages is essentially a feature request.