-
-
Notifications
You must be signed in to change notification settings - Fork 296
Description
Expected Behavior
Using notistack in a sub-project of a monorepo managed by pnpm where various projects in the monorepo use different versions of react works and does not result in TypeScript errors.
Current Behavior
In my environment, even though I'm trying to use notistack with react@18 and @types/react@18 in a sub-project's package.json, TypeScript picks up and uses @types/react@19 from the monorepo's root package.json file instead, leading to an error like the following:
error TS2786: 'SnackbarProvider' cannot be used as a JSX component.
Its type 'typeof SnackbarProvider' is not a valid JSX element type.
Type 'typeof SnackbarProvider' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
Type 'SnackbarProvider' is missing the following properties from type 'Component<any, any, any>': context, setState, forceUpdate, props, and 2 more.
as observed by hovering over the 'react' literal in the import * as React from 'react'; import line in my project's copy of node_modules/.pnpm/notistack@3.0.1_csstype@3.1.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/notistack/index.d.ts in VS Code and seeing the TypeScript intellisense report:
module "<MY_PROJECT>/node_modules/.pnpm/@types+react@19.0.10/node_modules/@types/react/index"
Steps to Reproduce
Skipped
Context
I ran into pnpm/pnpm#7158 while using notistack in a monorepo managed by pnpm that uses multiple different versions of react.
From pnpm/pnpm#7158 (comment) I understand the issue may be that notistack does not declare a peer dependency on @types/react (but rather just a dev dependency):
I've found that this is caused by third-party packages which include type declarations that use react types and have a phantom dependency on
@types/react. These packages should list@types/reactinpeerDependenciesbut it's fairly common for them to have it only as dev dependency, because with npm's hoisting behavior that phantom dependency typically won't cause issues.
And sure enough if I add the following to my root package.json file then all of the errors disappear and my builds/tests pass:
"packageExtensions": {
"notistack": {
"peerDependencies": {
"@types/react": "*"
}
}
}Would you consider adding a peer dependency on @types/react to this project's package.json file so we could avoid these errors? π
I think it's likely this other closed (but sounds like unresolved) issue may be related: #485
Your Environment
| Tech | Version |
|---|---|
| Notistack | v3.0.1 |
| React | 18.3.1 |
| Browser | Google Chrome |