Failed to launch - TypeError: Cannot read property 'getSourceFile' of undefined

[goneale]

Hi guys,

Receiving the strangest error today. I can't say what caused it, the only thing that has changed in our React Storybook project is a big upgrade to our ESLint/Prettier packages and configuration. Nothing else should have changed.

yarn storybook is returning this error:

ERROR in ./src/Auth/ResetPasswordForm/useStyles.tsx
Module build failed (from ./node_modules/react-docgen-typescript-loader/dist/index.js):
TypeError: Cannot read property 'getSourceFile' of undefined
    at Parser.getComponentInfo (C:\sopx\dev\projects\react-components-ts\node_modules\react-docgen-typescript\lib\parser.js:154:116)
    at Array.forEach (<anonymous>)
    at C:\sopx\dev\projects\react-components-ts\node_modules\react-docgen-typescript\lib\parser.js:780:20
    at Array.reduce (<anonymous>)
    at parseWithProgramProvider (C:\sopx\dev\projects\react-components-ts\node_modules\react-docgen-typescript\lib\parser.js:772:10)
    at Object.parseWithProgramProvider (C:\sopx\dev\projects\react-components-ts\node_modules\react-docgen-typescript\lib\parser.js:75:20)
    at processResource (C:\sopx\dev\projects\react-components-ts\node_modules\react-docgen-typescript-loader\dist\loader.js:115:32)
    at Object.loader (C:\sopx\dev\projects\react-components-ts\node_modules\react-docgen-typescript-loader\dist\loader.js:51:25)
 @ ./src/Auth/ResetPasswordForm/ResetPasswordForm.tsx 5:0-36 19:18-27
 @ ./src/Auth/Login/Login.tsx
 @ ./src/index.tsx
 @ ./src/Auth/Auth.stories.tsx
 @ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.tsx[\\/]?)$
 @ ./.storybook/generated-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true

useStyles.tsx really doesn't reveal anything exciting, this has always worked and remains unchanged from when storybook was loading:

import { makeStyles } from '@material-ui/core/styles';
import { WithStylesOptions } from '@material-ui/styles/withStyles';

const styles = () => ({
  divStyle: {
    float: 'right',
    marginTop: 15,
    display: 'flex',
    alignItems: 'center',
  },
  labels: { 'fontSize': 14, '& label': { fontSize: 14 } },
  backButton: { marginTop: 5, marginRight: 15 },
});

const useStyles = makeStyles(styles as any, { withTheme: true } as WithStylesOptions<{}>);

export default useStyles;

POI in package.json is as follows:

"@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-docs": "^5.3.19",
    "@storybook/addon-info": "^5.3.19",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-storysource": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/react": "^5.3.19",
"react": "^16.13.1",
"react-docgen-typescript-loader": "^3.7.2"

Sadly removing react-docgen-typescript-loader from the project gets everything working again and the storybook loads.
Thanks

[zackerydev]

I was able to fix this error by specifically binding to the eslint-plugin-react. The version I had bumped to 7.20.3 broke our Storybook site but the previous version (7.16.0) worked.