HMR Temporal DeadZone

Has anybody ran into TDZ (Temporal Dead Zone) during HMR? Essentially when i save a file a tanstack start function that is imported at the top of a page and used in the loader it throws a reference error "Cannot access 'fn' before initialization".

I didn't run into these issues in 1.12 only 1.13 and 1.14

ReferenceError: Cannot access 'getFlow' before initialization Tanstack/src/server/flows/get-flow.ts:13:11

ReferenceError: Cannot access 'getFlow' before initialization Tanstack/src/server/flows/get-flow.ts:13:11

import { db } from '@repo/db';
import { createServerFn } from '@tanstack/react-start';
import { z } from 'zod';
import { dbWithUserMiddleware } from '@/server/middleware/auth-middleware';

const getFlow = createServerFn()
  .inputValidator(
    z.object({
      id: z.string(),
    }),
  )
  .middleware([dbWithUserMiddleware])
  .handler(async ({ data, context: { user } }) => {
    ...
  });

export { getFlow };

import { db } from '@repo/db';
import { createServerFn } from '@tanstack/react-start';
import { z } from 'zod';
import { dbWithUserMiddleware } from '@/server/middleware/auth-middleware';

const getFlow = createServerFn()
  .inputValidator(
    z.object({
      id: z.string(),
    }),
  )
  .middleware([dbWithUserMiddleware])
  .handler(async ({ data, context: { user } }) => {
    ...
  });

export { getFlow };

import { useQuery } from '@tanstack/react-query';
import { getFlow } from '../get-flow';

export const useFlow = ({ id }: { id: string }) => {
  return useQuery({
    queryKey: ['flow', id],
    queryFn: () => getFlow({ data: { id } }),
  });
};

import { useQuery } from '@tanstack/react-query';
import { getFlow } from '../get-flow';

export const useFlow = ({ id }: { id: string }) => {
  return useQuery({
    queryKey: ['flow', id],
    queryFn: () => getFlow({ data: { id } }),
  });
};

TanStack•3mo ago•

1 reply

uncertain-scarlet

HMR Temporal DeadZone

ReferenceError: Cannot access 'getFlow' before initialization Tanstack/src/server/flows/get-flow.ts:13:11

ReferenceError: Cannot access 'getFlow' before initialization Tanstack/src/server/flows/get-flow.ts:13:11

import { db } from '@repo/db';
import { createServerFn } from '@tanstack/react-start';
import { z } from 'zod';
import { dbWithUserMiddleware } from '@/server/middleware/auth-middleware';

const getFlow = createServerFn()
  .inputValidator(
    z.object({
      id: z.string(),
    }),
  )
  .middleware([dbWithUserMiddleware])
  .handler(async ({ data, context: { user } }) => {
    ...
  });

export { getFlow };

import { db } from '@repo/db';
import { createServerFn } from '@tanstack/react-start';
import { z } from 'zod';
import { dbWithUserMiddleware } from '@/server/middleware/auth-middleware';

const getFlow = createServerFn()
  .inputValidator(
    z.object({
      id: z.string(),
    }),
  )
  .middleware([dbWithUserMiddleware])
  .handler(async ({ data, context: { user } }) => {
    ...
  });

export { getFlow };

import { useQuery } from '@tanstack/react-query';
import { getFlow } from '../get-flow';

export const useFlow = ({ id }: { id: string }) => {
  return useQuery({
    queryKey: ['flow', id],
    queryFn: () => getFlow({ data: { id } }),
  });
};

import { useQuery } from '@tanstack/react-query';
import { getFlow } from '../get-flow';

export const useFlow = ({ id }: { id: string }) => {
  return useQuery({
    queryKey: ['flow', id],
    queryFn: () => getFlow({ data: { id } }),
  });
};

HMR Temporal DeadZone

Similar Threads

HMR Temporal DeadZone

Similar Threads

Similar Threads

Similar Threads