I'm trying to use TypeScript reflection libraries like typescript-rtti and tst-reflect in a Next.js application, but I'm running into some issues.

For typescript-rtti, I am getting the following error:

Error: reflect<T>() can only be used when project is built with the typescript-rtti transformer by following the setup as described in the official docs.

And for tst-reflect, I am getting:

[ERR] tst-reflect: You call getType() method directly. You have probably wrong configuration, because tst-reflect-transformer package should replace this.
If you have right configuration it may be BUG so try to create an issue.

Context: I am calling the reflection functions(reflect<T>() and getType()) inside src/app/page.tsx file.

I found that Next.js uses SWC compiler which doesn't support custom Typescript transformers.

tst-reflectand typescript-rtti can be used with Webpack, ts-loader and ts-node.

Is there a workaround for using typescript reflection libraries in Next.js application ? Are there known working examples or approaches for using these reflection libraries in Next.js?

Setup:
- I am testing this in a barebone Next.js project created using:

bunx create-next-app

- Initialised the reflection libraries(in different Next.js applications) by following the offical documentation.

src/app/page.tsx:

import { reflect } from 'typescript-rtti';
import 'reflect-metadata';
import React from 'react';

interface User {
  id: number;
  username?: string;
  favoriteColor?: number | string;
}


export default function Home() {
  const checkType = reflect(User).getProperty('favoriteColor').type.is('union');
  console.log('type:', checkType);

  return (
    <div className="bg-cyan-500">
      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
        Hello world
      </div>
    </div>
  );
}