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

[Guria]

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 [email protected] 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 [email protected] release happened today. We still need to track back what exactly lead to this error. See also https://github.com/prettier/prettier/issues/9039

[gerhat]

I have the same issue

[JohnPaulHarold]

I have two projects, Both CRA TS.

First project got Storybook 6.0.6 installed about two weeks ago, same approach as above. It works fine, and still works fine after upgrading it to 6.0.16 as per the CLI upgrade instructions.

Second project I added Storybook today and am seeing this issue.

[Guria]

I feel it might be some transitive dependency issue. @JohnPaulHarold could you remove your lock file on working project, generate new one by installing dependencies and attach a diff on lock file after that. Also please mention whether your project would still build after that.

[JohnPaulHarold]

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

[agnihotriketan]

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

[Gigatrappeur]

I have the same issue but without CRA.
I even tested with an empty project and the examples produce the same problem

WARNING in ./src/stories/Header.stories.tsx
Module build failed (from ./node_modules/@storybook/source-loader/dist/index.js):
TypeError: Cannot read property 'start' of undefined
    at handleExportedName (C:\xxx\node_modules\@storybook\source-loader\dist\abstract-syntax-tree\parse-helpers.js:130:19)
    at Controller.enter (C:\xxx\node_modules\@storybook\source-loader\dist\abstract-syntax-tree\traverse-helpers.js:161:58)
    at Controller.__execute (C:\xxx\node_modules\estraverse\estraverse.js:330:31)
    at Controller.traverse (C:\Projects\Knowesia\npm-librairies\components-form-ng\node_modules\estraverse\estraverse.js:434:28)
    at Object.traverse (C:\xxx\node_modules\estraverse\estraverse.js:646:27)
    at findExportsMap (C:\xxx\node_modules\@storybook\source-loader\dist\abstract-syntax-tree\traverse-helpers.js:151:14)
    at generateStoriesLocationsMap (C:\xxx\node_modules\@storybook\source-loader\dist\abstract-syntax-tree\generate-helpers.js:220:61)
    at inject (C:\xxx\node_modules\@storybook\source-loader\dist\abstract-syntax-tree\inject-decorator.js:65:66)
    at readAsObject (C:\xxx\node_modules\@storybook\source-loader\dist\dependencies-lookup\readAsObject.js:26:48)
    at readStory (C:\xxx\node_modules\@storybook\source-loader\dist\dependencies-lookup\readAsObject.js:42:10)
    at Object.transform (C:\xxx\node_modules\@storybook\source-loader\dist\build.js:13:38)
 @ \.)(?=.)[^\\\/]*?\.stories\.(js|jsx|ts|tsx))$ (./src/stories sync ^\.(?:(?:^|[\\\/]|(?:(?:(?!(?:^|[\\\/])\.).)*?)[\\\/])(?!\.)(?=.)[^\\\/]*?\.stories\.(js|jsx|ts|tsx))$) ./Header.stories.tsx @ ./.storybook/generated-stories-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/preset/defaultParameters.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined

[Guria]

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

[gianlucabaldin]

same here an hour ago after a brand new Storybook install on my project

[zoom-daniel-shnayderman]

+1

[Gigatrappeur]

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.

[Guria]

Yeah, it somewhere around AST. handleExportedName expects to see loc property on node but it isn't there for some reason.

[shilman]

Does someone have a repro repo they can share?

[Guria]

It is right in my report
https://github.com/Guria/cra-ts-storybook-issue

[Guria]

@shilman please also see the diff ffrom @Gigatrappeur https://github.com/storybookjs/storybook/issues/12217#issuecomment-679182659
It shows dependencies chaged between working and non-working state.

[shilman]

Oops sorry i missed that. Will take a look!

[MarkAPhillips]

+1 same problem

[Guria]

~https://github.com/babel/babel/releases/tag/v7.11.0 looks very susspicious for me~

[Guria]

I found. It is [email protected]
Temp workaround with yarn:

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

[Guria]

https://github.com/Guria/cra-ts-storybook-issue/pull/2/files
https://github.com/Guria/cra-ts-storybook-issue/pull/2/checks?check_run_id=1022836548#step:5:1070

[lucasferreiralsf]

+1 the same issue with webpack react config.

[tsaiDavid]

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.

Seeing the same issue here - I'm able to see the story when I rename the file extension from .tsx -> .jsx as mentioned by @Gigatrappeur

[mgameover]

Hi guys,
I've faced with the same issue once updated storybook to v6.0.16. I found that breaking change is in v6.0.14
v6.0.13 works fine for me! - No warnings and I am able to see all my stories.

[Gigatrappeur]

Ok, @Guria, you right but I use NPM :-|

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

I found. It is [email protected]
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]

I tested your solution, @mgameover (https://github.com/storybookjs/storybook/issues/12217#issuecomment-679299395) but not working for me.
I delete node_modules and package-lock.json.
I forced the version 6.0.13 in package.json

"devDependencies": {
    "@babel/core": "^7.11.4",
    "@babel/register": "^7.10.5",
    "@storybook/addon-actions": "6.0.13",
    "@storybook/addon-controls": "6.0.13",
    "@storybook/addon-docs": "6.0.13",
    "@storybook/addon-links": "6.0.13",
    "@storybook/addons": "6.0.13",
    "@storybook/react": "6.0.13",
    ...
}

but npm list prettier print this:

$ npm list prettier
@selfhelp/[email protected] C:\xxx
`-- @storybook/[email protected]
  `-- @storybook/[email protected]
    `-- [email protected]

[dclark27]

@Gigatrappeur solution worked for me on npm

[Guria]

Downgrading storybook will not work, because with fresh install you recieve tons of other "fresh" packages in transitive dependencies. It only works if you have a valid lock file that prevents getting [email protected] ~(which brings some package update in its dependencies actually breaking storybook)~ in your dependencies.

[mgameover]

@Gigatrappeur, @Guria, you are right. I have a valid lock file that has [email protected]. That's why it works for me.

npm list prettier
+-- @storybook/[email protected]
| `-- [email protected]
`-- @storybook/[email protected]
  `-- [email protected]  deduped

My point was that the breaking change had been introduced in v6.0.14

[Guria]

@mgameover if you will remove your lock file and install dependencies you still may have this error again because of some other package brings [email protected] to your node_modules. No any particular storybook version were introducing breaking change.

[Guria]

And [email protected] were released today and storybooks 6.0.16 is 4 days old.

[ErmolaevID]

@Guria
You are right. Thank you very much

[mgameover]

@Guria, yes you are right again.
I've added previous version of prettier to my dev dependencies in package.json and updated storybook using npx sb upgrade command. Everything works fine now! At least i can see my stories.
So you don't need to edit lock file if you are using NPM

  "devDependencies": {
    "@storybook/angular": "6.0.16",
    "@storybook/addons": "6.0.16",
    "@storybook/addon-a11y": "6.0.16",
    "@storybook/addon-actions": "6.0.16",
    "@storybook/addon-docs": "6.0.16",
    "@storybook/addon-knobs": "6.0.16",
    "@storybook/addon-links": "6.0.16",
    "@storybook/addon-storysource": "6.0.16",
    "@storybook/addon-viewport": "6.0.16",
    "@storybook/source-loader": "6.0.16",
    "prettier": "2.0.5"
} 

Thanks!

[Guria]

Ok, now I see that source-loader imports from prettier parsers https://github.com/storybookjs/storybook/blob/2bee5ddc43c16dcd1ba3e21a5fc00a643dde1f91/lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js

[shilman]

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!

[gerhat]

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!

Works like a charm! Thank you @shilman!

[shilman]

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