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

Question

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?

Answer 1

I have fixed the error by doing the following

npm i react-router-dom@5.3.0
npm i @types/react-router-dom@5.3.0

Answer 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

Answer 3

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

Answer 4

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.