TanStack•5mo ago•

2 replies

popular-magenta

Eslint rule `@typescript-eslint/no-unsafe-assignment` triggers on `useParams` or `useSearch`

I've recently tried to update my code all the way up to the latest version and noticed a few eslint issues here and there in my codebase.

I could trace it down to a change between

1.132.0-alpha.4

1.132.0-alpha.4

and

1.132.0-alpha.8

1.132.0-alpha.8

.

I get the following error:

Unsafe assignment of an
any
any
value @typescript-eslint/no-unsafe-assignment

on this line of code:

  const { companyId: companyIdPathParam, siteId: siteIdPathParam } = useParams({ strict: false });

  const { companyId: companyIdPathParam, siteId: siteIdPathParam } = useParams({ strict: false });

We have a structure, where all our URLs start with

frontend/src/routes/company/$companyId/site/$siteId

frontend/src/routes/company/$companyId/site/$siteId

, so we are quite confident both those variables exist.

Another example where we get this is:

  const { inspectType, inspectId } = useSearch({ strict: false });

  const { inspectType, inspectId } = useSearch({ strict: false });

But we are quite confident those two search-params exist, because our root component is defined as:

const inspectorSearchParamsSchema = z
  .object({
    inspectType: InspectorContentType,
    inspectId: z.string(),
  })
  .or(
    z.object({
      inspectType: z.undefined(),
      inspectId: z.undefined(),
    }),
  );
type InspectorSearchParams = z.infer<typeof inspectorSearchParamsSchema>;

export const Route = createRootRouteWithContext()({
  component: RootComponent,
  errorComponent: ({ error }) => (
    <>
      <PageLayout hideSidebar={true}>
        <GlobalError error={error} />
      </PageLayout>
    </>
  ),
  validateSearch: (input) => inspectorSearchParamsSchema.parse(input),
  search: {
    middlewares: [
      retainSearchParams<InspectorSearchParams>(["inspectType", "inspectId"]),
    ],
  },
});

const inspectorSearchParamsSchema = z
  .object({
    inspectType: InspectorContentType,
    inspectId: z.string(),
  })
  .or(
    z.object({
      inspectType: z.undefined(),
      inspectId: z.undefined(),
    }),
  );
type InspectorSearchParams = z.infer<typeof inspectorSearchParamsSchema>;

export const Route = createRootRouteWithContext()({
  component: RootComponent,
  errorComponent: ({ error }) => (
    <>
      <PageLayout hideSidebar={true}>
        <GlobalError error={error} />
      </PageLayout>
    </>
  ),
  validateSearch: (input) => inspectorSearchParamsSchema.parse(input),
  search: {
    middlewares: [
      retainSearchParams<InspectorSearchParams>(["inspectType", "inspectId"]),
    ],
  },
});

The type we see on hover in our editor are not

any

any

, so it could also be a problem of the eslint rule.

Any help would be appreciated!

TanStack•5mo ago•

2 replies

popular-magenta

Eslint rule `@typescript-eslint/no-unsafe-assignment` triggers on `useParams` or `useSearch`

I've recently tried to update my code all the way up to the latest version and noticed a few eslint issues here and there in my codebase.

I could trace it down to a change between

1.132.0-alpha.4

1.132.0-alpha.4

and

1.132.0-alpha.8

1.132.0-alpha.8

.

I get the following error:

Unsafe assignment of an
any
any
value @typescript-eslint/no-unsafe-assignment

on this line of code:

  const { companyId: companyIdPathParam, siteId: siteIdPathParam } = useParams({ strict: false });

  const { companyId: companyIdPathParam, siteId: siteIdPathParam } = useParams({ strict: false });

We have a structure, where all our URLs start with

frontend/src/routes/company/$companyId/site/$siteId

frontend/src/routes/company/$companyId/site/$siteId

, so we are quite confident both those variables exist.

Another example where we get this is:

  const { inspectType, inspectId } = useSearch({ strict: false });

  const { inspectType, inspectId } = useSearch({ strict: false });

But we are quite confident those two search-params exist, because our root component is defined as:

const inspectorSearchParamsSchema = z
  .object({
    inspectType: InspectorContentType,
    inspectId: z.string(),
  })
  .or(
    z.object({
      inspectType: z.undefined(),
      inspectId: z.undefined(),
    }),
  );
type InspectorSearchParams = z.infer<typeof inspectorSearchParamsSchema>;

export const Route = createRootRouteWithContext()({
  component: RootComponent,
  errorComponent: ({ error }) => (
    <>
      <PageLayout hideSidebar={true}>
        <GlobalError error={error} />
      </PageLayout>
    </>
  ),
  validateSearch: (input) => inspectorSearchParamsSchema.parse(input),
  search: {
    middlewares: [
      retainSearchParams<InspectorSearchParams>(["inspectType", "inspectId"]),
    ],
  },
});

const inspectorSearchParamsSchema = z
  .object({
    inspectType: InspectorContentType,
    inspectId: z.string(),
  })
  .or(
    z.object({
      inspectType: z.undefined(),
      inspectId: z.undefined(),
    }),
  );
type InspectorSearchParams = z.infer<typeof inspectorSearchParamsSchema>;

export const Route = createRootRouteWithContext()({
  component: RootComponent,
  errorComponent: ({ error }) => (
    <>
      <PageLayout hideSidebar={true}>
        <GlobalError error={error} />
      </PageLayout>
    </>
  ),
  validateSearch: (input) => inspectorSearchParamsSchema.parse(input),
  search: {
    middlewares: [
      retainSearchParams<InspectorSearchParams>(["inspectType", "inspectId"]),
    ],
  },
});

The type we see on hover in our editor are not

any

any

, so it could also be a problem of the eslint rule.

Any help would be appreciated!

Eslint rule `@typescript-eslint/no-unsafe-assignment` triggers on `useParams` or `useSearch`

Similar Threads

Eslint rule `@typescript-eslint/no-unsafe-assignment` triggers on `useParams` or `useSearch`

Similar Threads

Similar Threads

Similar Threads