Skip to content

Phantom dependency / missing peer dependency on @types/reactΒ #618

@kcon-stackav

Description

@kcon-stackav

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions