storybookjs/storybook

[Bug]: Default stories show "Cannot find module [...]" with Storybook (v7) and Gatsby (v5)

Open

#21,958 opened on Apr 6, 2023

View on GitHub
 (11 comments) (7 reactions) (2 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugcompatibility with other toolsgatsbyhelp wantedsev:S3

Description

Describe the bug

When setting up storybook v7 to a gatsby v5(?) project that uses custom babel config according to gatsby docs, default stories fail to show and instead show errors like:

Cannot find module './src/stories/Introduction.mdx'
webpackEmptyContext@http://localhost:59104/main.17f180ed.iframe.bundle.js:1:7557
_callee$/</<@http://localhost:59104/main.17f180ed.iframe.bundle.js:1:5140

or

Cannot find module './src/stories/Button.stories.ts'

webpackEmptyContext@http://localhost:59104/main.17f180ed.iframe.bundle.js:1:7557
_callee2$/</<@http://localhost:59104/main.17f180ed.iframe.bundle.js:1:5943

To Reproduce

git clone https://github.com/oskari/gatsby-v5-storybook-v7
npm run build-storybook && npx serve storybook-static

System

Environment Info:

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 16.3
  npmPackages:
    @storybook/addon-essentials: ^7.0.2 => 7.0.2
    @storybook/addon-interactions: ^7.0.2 => 7.0.2
    @storybook/addon-links: ^7.0.2 => 7.0.2
    @storybook/blocks: ^7.0.2 => 7.0.2
    @storybook/react: ^7.0.2 => 7.0.2
    @storybook/react-webpack5: ^7.0.2 => 7.0.2
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

No response

Contributor guide

Tech stack
reacttypescript
Domain
frontendtesting
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
blocked
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Storybook basicsGatsby babel config
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Check the reproduction repository at https://github.com/oskari/gatsby v5 storybook v7. The issue occurs when using custom babel config with Gatsby. Review the Storybook webpack configuration and how it resolves modules. Look at the Gatsby documentation for babel config. The assignees may have progress; check comments for updates.