'after doing "npx sb init" (react storybook): node_modules/react-router/index.d.ts:151:74 - error TS1110: Type expected error

I am working on a large typescript react monorepo. In one of the packages I added react storybook using "npx sb init"

After doing that, when I did a yarn build of the entire repo, I get these errors:

node_modules/react-router/index.d.ts:151:74 - error TS1110: Type expected.

151 declare type ParamParseSegment<Segment extends string> = Segment extends `${infer LeftSegment}/${infer RightSegment}` ? ParamParseSegment<LeftSegment> extends infer LeftResult ? ParamParseSegment<RightSegment> extends infer RightResult ? LeftResult extends string ? RightResult extends string ? LeftResult | RightResult : LeftResult : RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : ParamParseSegment<RightSegment> extends infer RightResult ? RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : Segment extends `:${infer Remaining}` ? Remaining : ParamParseFailed;
                                                                             ~~~

node_modules/react-router/index.d.ts:151:83 - error TS1005: '}' expected.

151 declare type ParamParseSegment<Segment extends string> = Segment extends `${infer LeftSegment}/${infer RightSegment}` ? ParamParseSegment<LeftSegment> extends infer LeftResult ? ParamParseSegment<RightSegment> extends infer RightResult ? LeftResult extends string ? RightResult extends string ? LeftResult | RightResult : LeftResult : RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : ParamParseSegment<RightSegment> extends infer RightResult ? RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : Segment extends `:${infer Remaining}` ? Remaining : ParamParseFailed;
                                                                                      ~~~~~~~~~~~

node_modules/react-router/index.d.ts:151:94 - error TS1128: Declaration or statement expected.

151 declare type ParamParseSegment<Segment extends string> = Segment extends `${infer LeftSegment}/${infer RightSegment}` ? ParamParseSegment<LeftSegment> extends infer LeftResult ? ParamParseSegment<RightSegment> extends infer RightResult ? LeftResult extends string ? RightResult extends string ? LeftResult | RightResult : LeftResult : RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : ParamParseSegment<RightSegment> extends infer RightResult ? RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : Segment extends `:${infer Remaining}` ? Remaining : ParamParseFailed;
                                                                                                 ~

node_modules/react-router/index.d.ts:151:96 - error TS1161: Unterminated regular expression literal.

151 declare type ParamParseSegment<Segment extends string> = Segment extends `${infer LeftSegment}/${infer RightSegment}` ? ParamParseSegment<LeftSegment> extends infer LeftResult ? ParamParseSegment<RightSegment> extends infer RightResult ? LeftResult extends string ? RightResult extends string ? LeftResult | RightResult : LeftResult : RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : ParamParseSegment<RightSegment> extends infer RightResult ? RightResult extends string ? RightResult : ParamParseFailed : ParamParseFailed : Segment extends `:${infer Remaining}` ? Remaining : ParamParseFailed;
                                                                                                   


Found 4 errors.

error Command failed with exit code 1.

I googled but only found one result that was the same issue and it was unresolved. Does anyone know what might be the issue?

Solution 1:^[1]

I also faced the same issue after integrating the story book.I was unable to run the application using yarn start.

I tried upgrading the typescript by using yarn upgrade typescript@latest (If you are using npm then use npm update typescript@latest)

After upgrading the typescript issue got resolved for me.

Thank you

Solution 2:^[2]

Did you try updating the typescript version? I had this issue after updating the typescript to the latest version "typescript": "4.5.4" fixed the above issue.

Note: But for me, this issue happened when I was trying to commit my project, the husky pre-commit hook started emitting this error.

https://docs.microsoft.com/en-us/answers/questions/666336/issus-in-react-router-when-import-any-component-in.html

Solution 3:^[3]

This is known errors likes

Cannot find name 'infer'.
...
ERROR TS2304: Cannot find name 'LeftSegment'."

This is happens when I had a "typescript": "~4.0.2" So you need to update typescript to the latest stable version with command npm i typescript@latest, in my case updated to "typescript": "^4.5.4".

With these changes, the storybook should be working fine.

Solution 4:^[4]

I have fixed the error by doing the following

npm i [email protected]
npm i @types/[email protected]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	CodeByAk
Solution 2	Selvam Kumar
Solution 3	Volodymyr Khmil
Solution 4	mshameer

'after doing "npx sb init" (react storybook): node_modules/react-router/index.d.ts:151:74 - error TS1110: Type expected error

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]