JSX type

Author: AbhiPrasad

packages/react/src/reactrouter.tsx

@@ -32,7 +32,7 @@ export type RouteConfig = {
   [propName: string]: unknown;
   path?: string | string[];
   exact?: boolean;
-  component?: JSX.Element;
+  component?: React.JSX.Element;
   routes?: RouteConfig[];
 };
 
@@ -245,7 +245,6 @@ export function withSentryRouting<P extends Record<string, any>, R extends React
 
   WrappedRoute.displayName = `sentryRoute(${componentDisplayName})`;
   // Need to set type to any because of hoist-non-react-statics typing
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   hoistNonReactStatics(WrappedRoute, Route as any);
   // @ts-expect-error Setting more specific React Component typing for `R` generic above
   // will break advanced type inference done by react router params:

packages/react/src/types.ts

@@ -1,5 +1,6 @@
 // Disabling `no-explicit-any` for the whole file as `any` has became common requirement.
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import type { JSX } from 'react';
 
 export type Action = 'PUSH' | 'REPLACE' | 'POP';
 

packages/react/test/errorboundary.test.tsx

@@ -26,16 +26,16 @@ jest.mock('@sentry/browser', () => {
   };
 });
 
-function Boo({ title }: { title: string }): JSX.Element {
+function Boo({ title }: { title: string }): React.JSX.Element {
   throw new Error(title);
 }
 
-function Bam(): JSX.Element {
+function Bam(): React.JSX.Element {
   const [title] = useState('boom');
   return <Boo title={title} />;
 }
 
-function EffectSpyFallback({ error }: { error: unknown }): JSX.Element {
+function EffectSpyFallback({ error }: { error: unknown }): React.JSX.Element {
   const [counter, setCounter] = useState(0);
 
   React.useEffect(() => {
@@ -50,7 +50,7 @@ function EffectSpyFallback({ error }: { error: unknown }): JSX.Element {
 }
 
 interface TestAppProps extends ErrorBoundaryProps {
-  errorComp?: JSX.Element;
+  errorComp?: React.JSX.Element;
 }
 
 const TestApp: React.FC<TestAppProps> = ({ children, errorComp, ...props }) => {
@@ -282,7 +282,7 @@ describe('ErrorBoundary', () => {
     it('does not set cause if non Error objected is thrown', () => {
       const TestAppThrowingString: React.FC<ErrorBoundaryProps> = ({ children, ...props }) => {
         const [isError, setError] = React.useState(false);
-        function StringBam(): JSX.Element {
+        function StringBam(): React.JSX.Element {
           throw 'bam';
         }
         return (
@@ -333,7 +333,7 @@ describe('ErrorBoundary', () => {
     it('handles when `error.cause` is nested', () => {
       const mockOnError = jest.fn();
 
-      function CustomBam(): JSX.Element {
+      function CustomBam(): React.JSX.Element {
         const firstError = new Error('bam');
         const secondError = new Error('bam2');
         const thirdError = new Error('bam3');
@@ -378,7 +378,7 @@ describe('ErrorBoundary', () => {
     it('handles when `error.cause` is recursive', () => {
       const mockOnError = jest.fn();
 
-      function CustomBam(): JSX.Element {
+      function CustomBam(): React.JSX.Element {
         const firstError = new Error('bam');
         const secondError = new Error('bam2');
         // @ts-expect-error Need to set cause on error

packages/react/test/reactrouterv3.test.tsx

@@ -62,7 +62,7 @@ jest.mock('@sentry/core', () => {
 
 describe('browserTracingReactRouterV3', () => {
   const routes = (
-    <Route path="/" component={({ children }: { children: JSX.Element }) => <div>{children}</div>}>
+    <Route path="/" component={({ children }: { children: React.JSX.Element }) => <div>{children}</div>}>
       <IndexRoute component={() => <div>Home</div>} />
       <Route path="about" component={() => <div>About</div>} />
       <Route path="features" component={() => <div>Features</div>} />