Changes that must the done whether you're using ts-node-dev

[LuisFilipePedroso]

Hey there.

I realized that if using ts-node-dev on the project with Express, the example on the doc will not work.

So, instead of doing:

  app.use(
    playgroundEndpoint,
    await expressHandler({
      trpcApiEndpoint,
      playgroundEndpoint,
      router: appRouter,
      // uncomment this if you're using superjson
      // request: {
      //   superjson: true,
      // },
    }),
  )

we must do:

app.use(playgroundEndpoint, async (...params) => {
  const handler = await expressHandler({
    trpcApiEndpoint,
    playgroundEndpoint,
    router: appRouter,
    // uncomment this if you're using superjson
    // request: {
    //   superjson: true,
    // },
  });

  return handler(...params);
});

[sachinraja]

What's the error you get with ts-node-dev? In the example, the handler is created outside of the middleware function, so a handler isn't created on each request.

[LuisFilipePedroso]

There are a lot of issues opened on ts-node-dev repo related to top-level await and I believe that at this moment ts-node-dev isn't supporting top-level await.

[sachinraja]

That's why the example in the README wraps it in an async function

[sachinraja]

Also I recommend switching to https://github.com/esbuild-kit/tsx which does support top level await and other modern ESM features.

[LuisFilipePedroso]

Got it, I didn't see that part but I still believe isn't necessary to wrap all of the code because of a specific part. The way I did it only wraps a specific part and makes more sense, don't you think?

[sachinraja]

Unfortunately not because, as I said above, the handler will be re-created on each request with your way. This means all the init code for the playground will be re-run on each request unnecessarily.

I recommend switching to tsx if you want a better experience.