Can't get function to work with create-react-app

[munkylo7578]

Hello , I have a question, I am using tst-reflect through create-react-app and i'm using craco to config webpack. This is my craco.config.js:

const { getLoader, loaderByName } = require("@craco/craco");
const tstReflectTransform = require("tst-reflect-transformer").default;
const path = require("path")

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => { 

      if (env === 'development') {
        // your overridden `style-loader`
        const overrideOptions = {
          loader: "ts-loader",
          options: {
            configFile: path.join(__dirname, 'tsconfig.json'),
              getCustomTransformers: (program) => ({
                before: [tstReflectTransform(program, {})],
              }),
          },
        };

        // override `style-loader`
        const { isFound, match } = getLoader(webpackConfig, loaderByName('style-loader'));

        if (isFound) {
          match.parent[match.index] = overrideOptions;
        }
      }

      return webpackConfig; 
    },
  },
};

When i'm using this function in your repo's example ,it prints empty :

import { getType } from "tst-reflect";

export function printTypeProperties<TType>() 
{
    const type = getType<TType>(); // <<== get type of type parameter TType

    console.log(type.getProperties().map(prop => prop.name + ": " + prop.type.name).join("\n"),"222");
}

interface SomeType {
    foo: string;
    bar: number;
    baz: Date;
  }

  printTypeProperties<SomeType>();

Sorry for my bad english , can you help me ? Thanks.

[Hookyns]

CRA use babel loader by default. You have to remove babel loader and add ts-loader.

This works for me:

const {
    loaderByName,
    removeLoaders,
    addAfterLoader
} = require("@craco/craco");
const tstReflectTransform = require("tst-reflect-transformer").default;
const path = require("path");

module.exports = {
    webpack: {
        configure: (webpackConfig, {paths}) => {
            // Add ts-loader after babel-loader
            addAfterLoader(
                webpackConfig,
                loaderByName("babel-loader"),
                {
                    test: /\.(js|mjs|jsx|ts|tsx)$/,
                    include: paths.appSrc,
                    loader: require.resolve("ts-loader"),
                    options: {
                        configFile: path.join(__dirname, "tsconfig.json"),
                        getCustomTransformers: (program) => ({
                            before: [tstReflectTransform(program, {})]
                        })
                    }
                }
            );

            // Remove babel-loader
            removeLoaders(
                webpackConfig,
                loaderByName("babel-loader")
            );

            // Remove source-map-loader
            removeLoaders(
                webpackConfig,
                loaderByName("source-map-loader")
            );

            return webpackConfig;
        }
    }
};

Don't forget to npm i ts-loader -D

[Hookyns]

Then see issue https://github.com/Hookyns/tst-reflect/issues/81

[Hookyns]

Feel free to reopen this issue if you run into any related issues.