Upgrade to TS5.0 #21792

shilman · 2023-03-28T09:13:32Z

Long term, we'll want to:

Upgrade storybook's monorepo to TypeScript 5 (this is a maintenance task)
Ensure storybook is compatible with 5.0.0 and the generators we're compatible with (this will sort of happen automatically because generators will publish new versions and we'll start using them after ~24h)
Maybe add an internal sandbox to test compatibility with TypeScript 5, but I'm not sure there's a need for this.
Maybe investigate if the new language features might be useful for storybook or it's users.

Originally posted by @ndelangen in #21276 (comment)

psychobolt · 2023-05-03T16:36:30Z

For anyone who wants to use multiple array extends feature in TS 5.0, you'll get a error when running storybook build, sb automigrate, or storybook dev

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Array

Issue was fixed in dividab/tsconfig-paths#245 , but is still a issue until we can upgrade esbuild-register (egoist/esbuild-register#91) with the fix. I managed to set a resolution with the precompiled package update in my project. https://github.com/psychobolt/vite-storybook-boilerplate/tree/main/packages/esbuild-register

  "resolutions": {
    "esbuild-register": "workspace:*"
  }

naporin0624 · 2023-05-07T17:31:27Z

I applied the following patch in patch-package and it worked!

https://gist.github.com/naporin0624/70c2e00f791d881895910a8f2cdb3026

matthew-dean · 2023-07-04T20:53:03Z

Storybook 7 for Vite does not yet support TypeScript 5 (specifically the satisfies keyword). It has an old dependency on vue-docgen-api.

I was able to fix this by overriding Storybook in my package.json:

  "overrides": {
    "vue-docgen-api": "^4.73.0"
  },

custardcream98 · 2023-09-02T15:48:30Z

I'm still waiting for esbuild-register to be updated, but it seems like that won't happen anytime soon, as there haven't been any releases for esbuild-register since last year.

I believe it would be a good idea to explore alternative options if available. It's frustrating that Storybook still doesn't support array extends!

shilman · 2023-09-02T16:05:29Z

@custardcream98 what isn't working for you? Do you have a reproduction you can share? This issue is about updating the storybook monorepo to TS5. I'm pretty sure it should work fine in user projects (but have not verified--I'm on my phone)

custardcream98 · 2023-09-02T16:27:50Z

@shilman
Yes, it works fine but I can't use array extends in tsconfig as described above.

shilman · 2023-09-02T16:30:07Z

@custardcream98 gotcha--thanks for clarifying

ndelangen · 2023-09-14T09:21:53Z

@kasperpeulen this is now no longer blocked by esbuild-register

shilman · 2023-10-04T06:51:29Z

@custardcream98 does this now work in 7.5.0-alpha.3 and above for you?

steven-prybylynskyi · 2023-10-11T13:02:40Z

I have an error when using the mentioned above satisifies keyword

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /SelectControl.stories.tsx: Unexpected token, expected "," (18:2)

  16 |     placeholder: 'Estimated Arrival Time'
  17 |   }
> 18 | } satisfies Meta<typeof SelectControlComponent>);
     |   ^
  19 | export default meta;
  20 | type Story = StoryObj<typeof meta>;
  21 | export const SelectControl: Story = {
    at constructor (/node_modules/@babel/parser/lib/index.js:356:19)
    at JSXParserMixin.raise (/node_modules/@babel/parser/lib/index.js:3223:19)
    at JSXParserMixin.unexpected (/node_modules/@babel/parser/lib/index.js:3253:16)
    at JSXParserMixin.expect (/node_modules/@babel/parser/lib/index.js:3590:28)
    at JSXParserMixin.parseParenAndDistinguishExpression (/node_modules/@babel/parser/lib/index.js:11490:14)
    at JSXParserMixin.parseExprAtom (/node_modules/@babel/parser/lib/index.js:11142:23)
    at JSXParserMixin.parseExprAtom (/node_modules/@babel/parser/lib/index.js:6937:20)
    at JSXParserMixin.parseExprSubscripts (/node_modules/@babel/parser/lib/index.js:10862:23)
    at JSXParserMixin.parseUpdate (/node_modules/@babel/parser/lib/index.js:10845:21)
    at JSXParserMixin.parseMaybeUnary (/node_modules/@babel/parser/lib/index.js:10821:23)
    at JSXParserMixin.parseMaybeUnaryOrPrivate (/node_modules/@babel/parser/lib/index.js:10659:61)
    at JSXParserMixin.parseExprOps (/node_modules/@babel/parser/lib/index.js:10664:23)
    at JSXParserMixin.parseMaybeConditional (/node_modules/@babel/parser/lib/index.js:10641:23)
    at JSXParserMixin.parseMaybeAssign (/node_modules/@babel/parser/lib/index.js:10602:21)
    at /node_modules/@babel/parser/lib/index.js:10572:39
    at JSXParserMixin.allowInAnd (/node_modules/@babel/parser/lib/index.js:12284:16)
    at JSXParserMixin.parseMaybeAssignAllowIn (/node_modules/@babel/parser/lib/index.js:10572:17)
    at JSXParserMixin.parseVar (/node_modules/@babel/parser/lib/index.js:13264:91)
    at JSXParserMixin.parseVarStatement (/node_modules/@babel/parser/lib/index.js:13105:10)
    at JSXParserMixin.parseStatementContent (/node_modules/@babel/parser/lib/index.js:12688:23)
    at JSXParserMixin.parseStatementLike (/node_modules/@babel/parser/lib/index.js:12593:17)
    at JSXParserMixin.parseModuleItem (/node_modules/@babel/parser/lib/index.js:12570:17)
    at JSXParserMixin.parseBlockOrModuleBlockBody (/node_modules/@babel/parser/lib/index.js:13194:36)
    at JSXParserMixin.parseBlockBody (/node_modules/@babel/parser/lib/index.js:13187:10)
    at JSXParserMixin.parseProgram (/node_modules/@babel/parser/lib/index.js:12469:10)
    at JSXParserMixin.parseTopLevel (/node_modules/@babel/parser/lib/index.js:12459:25)
    at JSXParserMixin.parse (/node_modules/@babel/parser/lib/index.js:14381:10)
    at parse (/node_modules/@babel/parser/lib/index.js:14422:38)
    at parser (/node_modules/@babel/core/lib/parser/index.js:41:34)
    at parser.next (<anonymous>)
    at normalizeFile (/node_modules/@babel/core/lib/transformation/normalize-file.js:64:37)
    at normalizeFile.next (<anonymous>)
    at run (/node_modules/@babel/core/lib/transformation/index.js:21:50)
    at run.next (<anonymous>)
    at transform (/node_modules/@babel/core/lib/transform.js:22:33)
    at transform.next (<anonymous>)
    at step (/node_modules/gensync/index.js:261:32)
    at /node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/node_modules/gensync/index.js:223:11)
    at processResult (/node_modules/webpack/lib/NormalModule.js:764:19)
    at /node_modules/webpack/lib/NormalModule.js:866:5
    at /node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /node_modules/babel-loader/lib/index.js:39:103

steven-prybylynskyi · 2023-10-11T13:03:40Z

tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "jsx": "react-jsx",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noImplicitThis": false,
    "paths": {
      "@/*": ["src/*"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "strictNullChecks": true,
    "target": "esnext"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "**/*.stories.{ts,tsx}"
  ],
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

steven-prybylynskyi · 2023-10-11T13:05:05Z

package.json:

{
  "scripts": {
    "storybook": "storybook dev -p 6006",
  },
  "license": "MIT",
  "dependencies": {
    "date-fns": "^2.30.0",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-datepicker": "^4.20.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.47.0",
    "react-icons": "^4.11.0",
    "react-router-dom": "^6.16.0"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.4.6",
    "@storybook/addon-interactions": "^7.4.6",
    "@storybook/jest": "^0.2.3",
    "@storybook/react": "^7.4.6",
    "@storybook/react-webpack5": "^7.4.6",
    "@storybook/testing-library": "^0.2.2",
    "@types/webpack": "^5.28.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.8.1",
    "dotenv-defaults": "^5.0.2",
    "external-remotes-plugin": "^1.0.0",
    "husky": "^8.0.3",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-extended": "^4.0.2",
    "miragejs": "^0.1.47",
    "react-test-renderer": "^18.2.0",
    "storybook": "^7.4.6",
    "style-loader": "^3.3.3",
    "ts-jest": "^29.1.1",
    "ts-loader": "^9.5.0",
    "ts-node": "^10.9.1",
    "typescript": "~5.0.4",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "^5.9.0"
  },
  "eslintConfig": {
    "overrides": [
      {
        "files": [
          "*.stories.tsx"
        ],
        "rules": {
          "import/no-extraneous-dependencies": "off",
          "react-hooks/rules-of-hooks": "off"
        }
      }
    ]
  },
}

steven-prybylynskyi · 2023-10-11T13:05:51Z

.storybook/main.ts

import { StorybookConfig } from '@storybook/react-webpack5';

const storybookConfig: StorybookConfig = {
  stories: ['../src'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: true,
  },
  features: {
    buildStoriesJson: true,
  },
}

export default storybookConfig;

steven-prybylynskyi · 2023-10-11T13:07:06Z

@shilman please let me know where should I look at?

steven-prybylynskyi · 2023-10-11T14:50:31Z

also that:

shilman added the maintenance User-facing maintenance tasks label Mar 28, 2023

shilman added this to the Post 7.0 catch-all (temporary) milestone Mar 28, 2023

shilman mentioned this issue Mar 28, 2023

[Feature Request]: Investigate Typescript 5.0 #21276

Closed

2 tasks

psychobolt mentioned this issue May 3, 2023

Update tsconfig-paths egoist/esbuild-register#91

Merged

anneau mentioned this issue Aug 31, 2023

[Bug]: Throw compile error using tsconfig multiple extend #24010

Closed

anneau mentioned this issue Sep 14, 2023

Core: Upgrade esbuild-register to 3.5.0 #24175

Merged

8 tasks

kasperpeulen closed this as completed in #24175 Sep 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to TS5.0 #21792

Upgrade to TS5.0 #21792

shilman commented Mar 28, 2023 •

edited

psychobolt commented May 3, 2023 •

edited

naporin0624 commented May 7, 2023

matthew-dean commented Jul 4, 2023

custardcream98 commented Sep 2, 2023 •

edited

shilman commented Sep 2, 2023 •

edited

custardcream98 commented Sep 2, 2023

shilman commented Sep 2, 2023

ndelangen commented Sep 14, 2023

shilman commented Oct 4, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

Upgrade to TS5.0 #21792

Upgrade to TS5.0 #21792

Comments

shilman commented Mar 28, 2023 • edited

psychobolt commented May 3, 2023 • edited

naporin0624 commented May 7, 2023

matthew-dean commented Jul 4, 2023

custardcream98 commented Sep 2, 2023 • edited

shilman commented Sep 2, 2023 • edited

custardcream98 commented Sep 2, 2023

shilman commented Sep 2, 2023

ndelangen commented Sep 14, 2023

shilman commented Oct 4, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

steven-prybylynskyi commented Oct 11, 2023

shilman commented Mar 28, 2023 •

edited

psychobolt commented May 3, 2023 •

edited

custardcream98 commented Sep 2, 2023 •

edited

shilman commented Sep 2, 2023 •

edited