Error in published TypeScript definitions

[targos]

• react-error-boundary version: 4.0.1
• node version: 18.15.0
• npm version: 9.5.0

Relevant code or config

import { ErrorBoundary } from 'react-error-boundary';

What you did:

Type checking without "skipLibCheck": true in the tsconfig

What happened:

node_modules/react-error-boundary/dist/react-error-boundary.d.ts:56:93 - error TS2307: Cannot find module 'ErrorBoundaryContext' or its corresponding type declarations.

56     render(): import("react").FunctionComponentElement<import("react").ProviderProps<import("ErrorBoundaryContext").ErrorBoundaryContextType | null>>;
                                                                                               ~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in node_modules/react-error-boundary/dist/react-error-boundary.d.ts:56

Reproduction repository:

I suppose it can be reproduced in any repository which uses the library with TypeScript and lib check enabled, but happy to create one if you want.

Problem description:

Here is the relevant part of the published react-error-boundary.d.ts.
The return type of the render() method includes import("ErrorBoundaryContext").ErrorBoundaryContextType which cannot be resolved.

export class ErrorBoundary extends Component<PropsWithRef<PropsWithChildren<ErrorBoundaryProps>>, ErrorBoundaryState> {
    state: ErrorBoundaryState;
    static getDerivedStateFromError(error: Error): {
        didCatch: boolean;
        error: Error;
    };
    resetErrorBoundary: (...args: any[]) => void;
    componentDidCatch(error: Error, info: ErrorInfo): void;
    componentDidUpdate(prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState): void;
    render(): import("react").FunctionComponentElement<import("react").ProviderProps<import("ErrorBoundaryContext").ErrorBoundaryContextType | null>>;
}

Suggested solution:

Not sure. Maybe add an explicit type like JSX.Element for the return value of the render method?

[bvaughn]

This looks like a ParcelJS bug (maybe in @parcel/packager-ts?)

I think that line should be:

- render(): import("react").FunctionComponentElement<import("react").ProviderProps<import("ErrorBoundaryContext").ErrorBoundaryContextType | null>>;
+ render(): import("react").FunctionComponentElement<import("react").ProviderProps<ErrorBoundaryContextType | null>>;

There's no reason to "import" the ErrorBoundaryContext when it's already declared in the d.ts file within scope.

[bvaughn]

I filed a Parcel bug with repro at parcel-bundler/parcel#8908

[bvaughn]

Confirmed a workaround in my test project:
Note that a workaround for this issue seems to be declaring an explicit return type:

return createElement(
  ErrorBoundaryContext.Provider,
  {
    value: {},
  },
  children
) as ReactElement;

// dist/index.d.ts
export class ErrorBoundary extends Component<PropsWithChildren> {
    render(): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
}

[bvaughn]

Fix published in 4.0.2

Thanks for the helpful bug report!