question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook with CRA TS generates Cannot read property 'start' of undefined WARN at handleExportedName

See original GitHub issue

Describe the bug Unable to run and build storybook 6 for typescript (tried with CRA and my own project setup without bundler).

All default stories except of Introduction.stories.mdx producing stack traces like:

WARN ./src/stories/Button.stories.tsx
WARN Module build failed (from ./node_modules/@storybook/source-loader/dist/index.js):
WARN TypeError: Cannot read property 'start' of undefined
WARN     at handleExportedName (/home/guria/ws/sandbox/my-app/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/parse-helpers.js:130:19)
WARN     at Controller.enter (/home/guria/ws/sandbox/my-app/node_modules/@storybook/source-loader/dist/abstract-syntax-tree/traverse-helpers.js:161:58)

To Reproduce Steps to reproduce the behavior:

  1. Init new project with yarn create react-app . --template typescript
  2. Init storybook with npx sb init
  3. Run yarn storybook-build

Expected behavior Storybook to be built without exceptions and warnings with stories for default components.

System: Please paste the results of npx sb@next info here.

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 14.1.0 - ~/.nvm/versions/node/v14.1.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v14.1.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v14.1.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.135
    Firefox: 79.0
  npmPackages:
    @storybook/addon-actions: ^6.0.16 => 6.0.16 
    @storybook/addon-essentials: ^6.0.16 => 6.0.16 
    @storybook/addon-links: ^6.0.16 => 6.0.16 
    @storybook/node-logger: ^6.0.16 => 6.0.16 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.16 => 6.0.16 

Reproduction repo

See also repro repo and log from GitHub Actions run

Updates. Workarounds found.

Make sure prettier@2.1.0 is not in your node_modules. For yarn users https://github.com/storybookjs/storybook/issues/12217#issuecomment-679266729 For npm users https://github.com/storybookjs/storybook/issues/12217#issuecomment-679299790

So the root cause seems to be related to prettier@2.1.0 release happened today. We still need to track back what exactly lead to this error. See also https://github.com/prettier/prettier/issues/9039

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:30
  • Comments:35 (16 by maintainers)

github_iconTop GitHub Comments

11reactions
shilmancommented, Aug 25, 2020

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.17 containing PR #12226 that references this issue. Upgrade today to try it out!

8reactions
Guriacommented, Aug 24, 2020

I found. It is prettier@2.1.0 Temp workaround with yarn:

  // package.json
  "resolutions": {
    "prettier": "~2.0.0"
  }
Read more comments on GitHub >

github_iconTop Results From Across the Web

Storybook cannot read property 'displayName' of undefined
The solution was to find the index.ts in the src folder and add my new components to it manually. Hope this helps someone....
Read more >
Frequently Asked Questions - Storybook - JS.ORG
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
Setting up a React + TypeScript + Storybook project - Medium
This post acts as a guide to set up a project consisting of React, TypeScript and Storybook. It also shows fixes to common...
Read more >
storybook/preset-create-react-app - npm
This preset uses CRA's Webpack/Babel configurations, so that Storybook's behavior matches your app's behavior. However, there may be some cases ...
Read more >
@storybook/react | Yarn - Package Manager
@storybook/react. owner storybookjs14.6mMIT6.5.15TS vulns 152 vulnerabilities. Storybook for React ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found