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

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:

Init new project with yarn create react-app . --template typescript
Init storybook with npx sb init
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

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 30
Comments: 35 (16 by maintainers)

Commits related to this issue

fix(deps): pin prettier to 2.0.x version fixes #12217 fixes #12218 `prettier@2.1.0` introduced some breaking changes in its parsers. So we have to pin our dependency. — committed to Guria/storybook by Guria 4 years ago

Most upvoted comments

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!

+11

shilman on Aug 25, 2020

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

  // package.json
  "resolutions": {
    "prettier": "~2.0.0"
  }

Guria on Aug 24, 2020

Ok, @Guria, you right but I use NPM 😐

https://github.com/storybookjs/storybook/issues/12217#issuecomment-679266729

I found. It is prettier@2.1.0 Temp workaround with yarn:
  // package.json
  "resolutions": {
    "prettier": "~2.0.0"
  }

For NPM users it’s more complicated. The workaround :

edit package-lock.json
search "prettier": "^2.0.5" in "require" section in "@storybook/source-loader"
and in section "dependencies", change "version": "2.1.0" to "version": "2.0.5"
remove other properties ("resolved", "integrity" and "dev")

"@storybook/source-loader": {
      "version": "6.0.16",
      "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.0.16.tgz",
      "integrity": "sha512-Ub6bU7o2JJUigzu9MSrFH1RD2SmpZZnym+WEidWI9A1gseKp1Rd4KDq36AqJo/oL3hAzoAOirrv3ZixIwXLFMg==",
      "dev": true,
      "requires": {
        "@storybook/addons": "6.0.16",
        "@storybook/client-logger": "6.0.16",
        "@storybook/csf": "0.0.1",
        "core-js": "^3.0.1",
        "estraverse": "^4.2.0",
        "global": "^4.3.2",
        "loader-utils": "^2.0.0",
        "lodash": "^4.17.15",
        "prettier": "^2.0.5",
        "regenerator-runtime": "^0.13.3"
      },
      "dependencies": {
        "prettier": {
          "version": "2.0.5"
        }
      }
    }

next, remove node_modules folder
and run npm install

To test: npm list prettier

Gigatrappeur on Aug 24, 2020

+1 same problem

MarkAPhillips on Aug 24, 2020

I am facing similar issue now. It was working well in last week

agnihotriketan on Aug 24, 2020

Okay, it looks like it’s coming from babel. I renamed src/stories/button.stories.tsx to button.stories.jsx and converted the code to JS Then the file appears in the storybook interface.

Gigatrappeur on Aug 24, 2020

Thanks @Guria for figuring it all out! 👏 👏 👏

shilman on Aug 25, 2020

@Gigatrappeur solution worked for me on npm

dclark27 on Aug 24, 2020

@Gigatrappeur I also had a setup without CRA with the same issue. Just used CRA template for simpler reproducible setup

Guria on Aug 24, 2020

Diff attached.

As you predicted, I now get the Storybook issue on both projects. I also get an error about a “Pretty-Format” module.

Failed to compile.

<path>/node_modules/pretty-format/build/index.d.ts
TypeScript error in <path>/node_modules/pretty-format/build/index.d.ts(7,13):
'=' expected.  TS1005

     5 |  * LICENSE file in the root directory of this source tree.
     6 |  */
  >  7 | import type * as PrettyFormat from './types';
       |             ^
     8 | /**
     9 |  * Returns a presentation string of your `val` object
    10 |  * @param val any potential JavaScript object

update: fixed TS1005 error with https://github.com/facebook/create-react-app/issues/8714. Storybook issue remains.

sb.diff.zip

JohnPaulHarold on Aug 24, 2020