_the simplest way_ example not compiling in typescript
See original GitHub issuereact-error-boundary
version: 2.2.2node
version: 12.16.1yarn
version: 1.22.4typescript
version: 3.9.2
What you did
Trying to compile the simplest way example from Usage in docs with typescript. https://github.com/bvaughn/react-error-boundary#usage
(Since the onError
example has type annotations and type definitions are shipped, I’m assuming typescript is supported for this project.)
What happened:
Compile error
No overload matches this call.
Overload 1 of 2, '(props: Readonly<ErrorBoundaryPropsWithFallback> | Readonly<ErrorBoundaryPropsWithComponent> | Readonly<...>): ErrorBoundary', gave the following error.
Type '({ error, componentStack, resetErrorBoundary }: { error: any; componentStack: any; resetErrorBoundary: any; }) => Element' is not assignable to type 'ComponentType<FallbackProps>'.
Type '({ error, componentStack, resetErrorBoundary }: { error: any; componentStack: any; resetErrorBoundary: any; }) => Element' is not assignable to type 'FunctionComponent<FallbackProps>'.
Types of parameters '__0' and 'props' are incompatible.
Type 'PropsWithChildren<FallbackProps>' is not assignable to type '{ error: any; componentStack: any; resetErrorBoundary: any; }'.
Property 'error' is optional in type 'PropsWithChildren<FallbackProps>' but required in type '{ error: any; componentStack: any; resetErrorBoundary: any; }'.
Overload 2 of 2, '(props: ErrorBoundaryProps, context?: any): ErrorBoundary', gave the following error.
Type '({ error, componentStack, resetErrorBoundary }: { error: any; componentStack: any; resetErrorBoundary: any; }) => Element' is not assignable to type 'ComponentType<FallbackProps>'.
Type '({ error, componentStack, resetErrorBoundary }: { error: any; componentStack: any; resetErrorBoundary: any; }) => Element' is not assignable to type 'FunctionComponent<FallbackProps>'.
Reproduction:
import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
function ErrorFallback({ error, componentStack, resetErrorBoundary }) {
return (
<div role="alert">
<p>Something went wrong:</p>
<pre>{error.message}</pre>
<pre>{componentStack}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
);
}
const ComponentThatMayError = () => <div />;
const ui = (
<ErrorBoundary
FallbackComponent={ErrorFallback} <-- compile error is here
onReset={() => {
// reset the state of your app so the error doesn't happen again
}}
>
<ComponentThatMayError />
</ErrorBoundary>
);
Suggested solution:
Update the docs with a working example.
Issue Analytics
- State:
- Created 3 years ago
- Comments:5
Top Results From Across the Web
Common TypeScript module problems and how to solve them
Enabling the compiler module resolution tracing in TypeScript can provide insight in diagnosing and solving problems.
Read more >TypeScript Compiling with Visual Studio Code
The easiest way to install TypeScript is through npm, the Node.js Package Manager. If you have npm installed, you can install TypeScript globally...
Read more >TypeScript Tutorial #2 - Compiling TypeScript - YouTube
Hey gang, in this tutorial I'll show you how we can compile typescript files into JavaScript files.
Read more >Compile TypeScript Project - TutorialsTeacher
TypeScript supports compiling a whole project at once by including the tsconfig.json file in the root directory. The tsconfig.json file is a simple...
Read more >Documentation - TypeScript Tooling in 5 minutes
A tutorial to understand how to create a small website with TypeScript. ... language support by default but does not include the TypeScript...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
OK, then there is not much to do about this issue, since the example is already valid javascript.
I’ll just post the updated code example here for future reference.
I don’t use TypeScript so I’m not sure how to proceed here. A pull request to fix either the typings or the example would be welcome 😃