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/react in peerDependencies but 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 |
Expected Behavior
Using
notistackin a sub-project of a monorepo managed bypnpmwhere 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
notistackwithreact@18and@types/react@18in a sub-project'spackage.json, TypeScript picks up and uses@types/react@19from the monorepo's rootpackage.jsonfile instead, leading to an error like the following:as observed by hovering over the
'react'literal in theimport * as React from 'react';import line in my project's copy ofnode_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.tsin VS Code and seeing the TypeScript intellisense report:Steps to Reproduce
Skipped
Context
I ran into pnpm/pnpm#7158 while using
notistackin a monorepo managed bypnpmthat uses multiple different versions of react.From pnpm/pnpm#7158 (comment) I understand the issue may be that
notistackdoes not declare a peer dependency on@types/react(but rather just a dev dependency):And sure enough if I add the following to my root
package.jsonfile then all of the errors disappear and my builds/tests pass:Would you consider adding a peer dependency on
@types/reactto this project'spackage.jsonfile 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