Trying to reproduce with a minimal example:

export const loader = async ({
    request,
  }: LoaderArgs): Promise<TypedJsonResponse<LoaderData>> => {
  
    const data = {
      date: new Date()
    };
  
    return typedjson(data);
};


export default function Dashboard(): JSX.Element {
  const loaderData = useTypedLoaderData<typeof loader>();
  const { date } = loaderData;
  // Purposefully throw an error to show issue
  throw new Error("TEST")
  return null;
}

Error message in browser console window:

Uncaught SyntaxError: Unexpected identifier 'Nov'

When checking the file its talking about in Sources tab You'll see something like this in the file:

'routeData':{'routes/dashboard': {'date':Thu Nov 03 2022 11:04:25 GMT-0400 (Eastern Daylight Time)}}'

Seems like the typedjson is causing syntax errors somewhere due to the type conversions?

I am testing a deployment to fly.io and am getting an error:

[info] > start
[info] > cross-env NODE_ENV=production node ./build/server.js
[info] Error: Cannot find module 'tslib'
[info] Require stack:
[info] - /myapp/node_modules/remix-typedjson/dist/remix.js
[info] - /myapp/node_modules/remix-typedjson/dist/index.js
[info] - /myapp/build/index.js
[info] - /myapp/build/server.js
[info] at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
[info] at Function.Module._load (node:internal/modules/cjs/loader:804:27)
[info] at Module.require (node:internal/modules/cjs/loader:1028:19)
[info] at require (node:internal/modules/cjs/helpers:102:18)
[info] at Object.<anonymous> (/myapp/node_modules/remix-typedjson/dist/remix.js:4:17)
[info] at Module._compile (node:internal/modules/cjs/loader:1126:14)
[info] at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
[info] at Module.load (node:internal/modules/cjs/loader:1004:32)
[info] at Function.Module._load (node:internal/modules/cjs/loader:839:12)
[info] at Module.require (node:internal/modules/cjs/loader:1028:19)

I noticed your tsconfig.json has importHelpers set to true. https://github.com/kiliman/remix-typedjson/blob/c1ed8747d60cd651be689fc1eb327f4a00701f81/tsconfig.json#L13

Are consumers responsible for also installing tslib, or is there a better way to resolve this error?

Related to conversation https://github.com/kiliman/remix-typedjson/issues/18 - exports the UseDataFunctionReturn type which makes typing a loader response when consumed via useMatches and should be helpful in concert with the useRouteLoaderData function.

Upon installing remix 1.7.0 I started having this issue with remix-typedjson:

Error: You must render this element in a remix route element
[dev:*server]     at invariant (/Users/.../app/node_modules/@remix-run/react/dist/invariant.js:15:11)
[dev:*server]     at useRemixRouteContext (/Users/.../app/node_modules/@remix-run/react/dist/components.js:179:3)
[dev:*server]     at useLoaderData (/Users/.../app/node_modules/@remix-run/react/dist/components.js:964:10)
[dev:*server]     at useTypedLoaderData (/Users/.../app/node_modules/remix-typedjson/dist/remix.js:20:44)
[dev:*server]     at App (/Users/.../app/src/app/root.tsx:58:29)
[dev:*server]     at renderWithHooks (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
[dev:*server]     at renderIndeterminateComponent (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5735:15)
[dev:*server]     at renderElement (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
[dev:*server]     at renderNodeDestructiveImpl (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
[dev:*server]     at renderNodeDestructive (/Users/.../app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)

I found myself wanting to access a loader response generated by remix-typedjson via useMatches and ran into difficulty trying to specify the type of the data attribute.

I tried doing various incantations of:

match as Awaited<Promise<ReturnType<typeof loader>>>

In so doing I was never able to get the typedJson unwrapped from the response type, the closest I managed to get was:

Response & { typedjson(): Promise<{ foo: string, bar: number }> }

When Remix 1.10 lands useRouteLoaderData (https://reactrouter.com/en/main/hooks/use-route-loader-data) seems like it'll offer a better model for accessing loader data from elsewhere in the tree much more elegantly than the useMatches route so perhaps I'm barking up the wrong tree entirely.

Exporting the TypedFetcherWithComponents comes handy, when you would like to pass around a fetcher in react components and you would like to type those components.

Also, it's exported in the remix-react base package as well.

When I use remix-typedjson with Remix + Cloudflare Workers template, there is the following error:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')

When I wrap the loader data in another object, it fails while deserializing. Here's a reproduction: https://stackblitz.com/edit/github-gbcwza?file=app%2Froutes%2Ftest.tsx

The code:

  return typedjson(
    { data: { greeting: "hello", today: new Date() } },
  );

Awesome project!

I would like to serialize DateTime (from luxon), inbuilt URL data type etc. For reference, I am using https://github.com/clentfort/urql-custom-scalars-exchange to serialize the data in loader.

Sorry to be the bearer of the bad news, but I may have stumbled upon another bug. This is the payload:

  return typedjson(
    { data: [{ greeting: "hello", today: new Date() }], counter: 1 },
  );

And the StackBlitz link: https://stackblitz.com/edit/github-gbcwza-6tcdt7?file=app%2Froutes%2Ftest.tsx

counter is null and its meta is "undefined". Doesn't change when it's a string either.

Firstly, thank you for the awesome library and for bringing end-to-end type safety to Remix.

I have a problem that is specific to the exported meta function from a route.

Have a posts/$slug route which has a loader which exports few posts and rendered markdown in html format. With remix-typedjson it looks something like this:

export const loader = async ({ params }: LoaderArgs) => {
  invariant(params.slug, "params.slug is required")

  const post = await getPost(params.slug)

  invariant(post, `Post not found: ${params.slug}`)

  const html = marked(post.markdown)

  return typedjson({
    post,
    html,
  })
}

But when I want to access the returned data in the meta function to add a title for my page, I obviously don't get the types as MetaFunction by default has data set to any:

export const meta: MetaFunction = ({ data }) => {
  console.log("Data:", data)

  return {
    title: `Posts | ${data.post.title}`,
  }
}

Is it possible to type data returned from loader in the meta function?