Doens't work with Typescript 4.3.2

[MarkLyck]

Changing nothing else in my Pull Request than just updating TypeScript from 4.2.4 to 4.3.2 breaks Chromatic.

Once I do this, change I get the following error: TypeError: (tag.text || "").trim is not a function

full log:

Run chromaui/action@v1

Chromatic CLI v5.8.3
https://www.chromatic.com/docs/cli

Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
Authenticated with Chromatic
    → Using project token '*******lf6l'
Retrieving git information
Retrieved git information
    → Commit '6847e1c' on branch 'renovate/typescript-4.x'; found 1 parent commit
Collecting Storybook metadata
Collected Storybook metadata
    → Storybook v6.2.9 for React; supported addons found: Actions, Essentials, Links
Building your Storybook
    → Running command: npm run --silent build-storybook -- --output-dir /tmp/chromatic--1983-xxTfPWytKsKb
The CLI tried to run your build-storybook script, but the command failed. This indicates a problem with your Storybook. Here's what to do:

- Check the Storybook build log printed below.
- Run npm run build-storybook or yarn build-storybook yourself and make sure it outputs a valid Storybook by opening the generated index.html in your browser.
- Review the build-storybook CLI options at https://storybook.js.org/docs/configurations/cli-options/#for-build-storybook

Command failed with exit code 1: npm run --silent build-storybook -- --output-dir /tmp/chromatic--1983-xxTfPWytKsKb
    → Command failed: npm run --silent build-storybook -- --output-dir /tmp/chromatic--1983-xxTfPWytKsKb

ℹ Spawn settings:
{
  "client": "npm",
  "clientVersion": "6.14.13",
  "nodeVersion": "v14.17.0",
  "platform": "linux",
  "command": "npm",
  "clientArgs": [
    "run",
    "--silent"
  ],

  "scriptArgs": [
    "build-storybook",
    "--",
    "--output-dir",
    "/tmp/chromatic--1983-xxTfPWytKsKb"
  ]
}

ℹ Storybook build output:
/home/runner/work/colony-frontend/colony-frontend/build-storybook.log

info @storybook/react v6.2.9
info 
info => Cleaning outputDir: /tmp/chromatic--1983-xxTfPWytKsKb
info => Copying static files: ./public => ./
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info => Loading 1 config file in "/home/runner/work/colony-frontend/colony-frontend/.storybook"
info => Loading 7 other files in "/home/runner/work/colony-frontend/colony-frontend/.storybook"
WARN unable to find package.json for framer-motion
info => Adding stories defined in "/home/runner/work/colony-frontend/colony-frontend/.storybook/main.js"
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Loading custom Webpack config (full-control mode).
Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-proposal-private-methods.
The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
	["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
to the "plugins" section of your Babel config.
info => Manager built (49 s)
/home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/lib/parser.js:475
            var trimmedText = (tag.text || '').trim();
                                               ^
TypeError: (tag.text || "").trim is not a function
    at /home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:750:44
    at Array.forEach (<anonymous>)
    at Parser.getFullJsDocComment (/home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:749:10)
    at Parser.findDocComment (/home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:707:26)
    at /home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:654:33
    at Array.forEach (<anonymous>)
    at Parser.getPropsInfo (/home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:645:23)
    at Parser.getComponentInfo (/home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:363:26)
    at /home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:1351:28
    at Array.forEach (<anonymous>)
    at /home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:1350:18
    at Array.reduce (<anonymous>)
    at parseWithProgramProvider (/home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:1339:6)
    at Object.parseWithProgramProvider (/home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript/src/parser.ts:187:14)
    at processModule (/home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript-plugin/src/plugin.ts:90:32)
    at /home/runner/work/colony-frontend/colony-frontend/node_modules/react-docgen-typescript-plugin/src/plugin.ts:228:11



Error: non-zero exit code

Nothing else besides the version of TypeScript has changed between Chromatic working and Chromatic not working. (nothing else is broken)

[adbayb]

Seems to be related to react-docgen-typescript package.
Issue available here

[tmeasday]

@MarkLyck are you able to run build-storybook outside of Chromatic? If not, the SB issue is the best place to track this.

[soorena110]

npx sb upgrade --prerelease works