[bugfix] Check for undefined before reading property in extractArgTypes.ts

[ProjektGopher]

Issue:
The type property on DocgenInfo is optional. By casting to any we lose the prompt that type could be undefined. So in some cases we're trying to read the property name of undefined.

// console error in browser
▸ Error loading story index:
▸ TypeError: Cannot read properties of undefined (reading 'name')
at Array.isEnum (extractArgTypes.js:40:1)
at verifyPropDef (extractArgTypes.js:68:1) at extractArgTypes.js:92:1
at Array.forEach (<anonymous>)
at extractArgTypes.js:87:1
at Array.forEach (<anonymous>)
at extractArgTypes (extractArgTypes.js:85:1) at enhanceArgTypes (enhanceArgTypes.js:8:1)
at prepareStory.js:111:1
at Array.reduce (<anonymous>)

// app/vue/src/client/docs/extractArgTypes.ts
function isEnum(propDef: PropDef, docgenInfo: DocgenInfo): false | PropDef {
  // cast as any, since "values" doesn't exist in DocgenInfo type
  const { type, values } = docgenInfo as any;
  const matched = Array.isArray(values) && values.length && type.name !== 'enum';

// lib/docs-tools/src/argTypes/docgen/types.ts
export interface DocgenInfo {
  type?: DocgenPropType;
  flowType?: DocgenFlowType;
  tsType?: DocgenTypeScriptType;
  required: boolean;
  description?: string;
  defaultValue?: DocgenPropDefaultValue;
}

What I did

// app/vue/src/client/docs/extractArgTypes.ts
function isEnum(propDef: PropDef, docgenInfo: DocgenInfo): false | PropDef {
  // cast as any, since "values" doesn't exist in DocgenInfo type
  const { type, values } = docgenInfo as any;
- const matched = Array.isArray(values) && values.length && type.name !== 'enum';
+ const matched = Array.isArray(values) && values.length && type && type.name !== 'enum';

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit dbef1ab. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[webistomin]

Thanks! I run into the same problem😉

[yannbf]

Hey @ProjektGopher thank you so much for your contribution! 🚀

[yannbf]

Hey @ndelangen could you check whether this change has to be done in other frameworks as well? Or at least Vue3? Thanks!

[ProjektGopher]

For anyone who needs to patch this before the PR gets merged, here's a useful workaround that'll get your CI builds passing as well:

Create patch.js in your project's .storybook directory

#!/usr/bin/env node
'use strict';

var fs = require('fs')
var path = require('path')

const patches = [
  { // app/vue/src/client/docs/extractArgTypes.ts (cjs)
    file: path.resolve(__dirname, '../node_modules/@storybook/vue/dist/cjs/client/docs/extractArgTypes.js'),
    find: "var matched = Array.isArray(values) && values.length && type.name !== 'enum';",
    replace: "var matched = Array.isArray(values) && values.length && type && type.name !== 'enum';"
  },
  { // app/vue/src/client/docs/extractArgTypes.ts (esm)
    file: path.resolve(__dirname, '../node_modules/@storybook/vue/dist/esm/client/docs/extractArgTypes.js'),
    find: "var matched = Array.isArray(values) && values.length && type.name !== 'enum';",
    replace: "var matched = Array.isArray(values) && values.length && type && type.name !== 'enum';"
  },
]

for (const patch of patches) {
  fs.readFile(patch.file, 'utf8', (err,data) => {
    if (err) {
      return console.log(err);
    }
    const result = data.replace(patch.find, patch.replace);
    fs.writeFile(patch.file, result, 'utf8', (err) => {
       if (err) return console.log(err);
    });
  });
}

Add this command to the scripts section of your package.json

"patch:storybook": "node .storybook/patch.js"

Add this command to your CI config right after installing dependencies

- run:
  name: Patch Storybook
  command: npm run patch:storybook

From now until patch, you can simply run npm run patch:storybook after (re)installing your node_modules.

[ndelangen]

The code in question does not appear anywhere else. @yannbf