typescriptwebpack-5babel-loaderts-loader

d.ts enum values don't end up in the compiled output


I have a project where I have a big global.d.ts file. the project runs on webpack 4 + typescript 4 and uses the awesome-typescript-loader and babel-loader. The project is pretty old basically. I am setting the project with webpack 5, typescript 5 and esbuild-loader.

Inside, I have a couple of enums such as

declare enum MyEnum {
   propertyOne = 'value1',
   propertyTwo = 'value2',
   //... etc
}

When the enum is outputted inside the compiled code, it looks like this:

[
   MyEnum.propertyOne,
   MyEnum.propertyTwo,
   //... etc
]

While i would expect MyEnum.propertyOne and MyEnum.propertyTwo to be both their respective values, 'value1' and 'value2'.

Meaning i'd expect this:

[
   'value1',
   'value2',
   //... etc
]

In my tsconfig I have the following properties set to true:

declaration: true,
preserveConstEnums: true,
isolatedModules: true

Besides, the global.d.ts file is included in the "include" array and inside "typeRoots" array.

I have also tried setting the enums to const.

declare const enum MyEnum {
   propertyOne = 'value1',
   propertyTwo = 'value2',
   //... etc
}

I have also tried ts-loader, which does compile the code properly only if it isn't supplied with the transpileOnly option set to true, however it is very slow.

I was wondering if there was some kind of trick to make esbuild-loader work in this way or in a similar way, just to not make the code break and remain performant enough.

I have also attempted to try babel-loader, but it has the same issue.

If fixing this can't be achieved with either esbuild-loader or babel-loader I was wondering if there are other loaders out there that work similarly to ts-loader while being performant?

Thank you.


Solution

  • My suggestion is to remove declare from where you used const:

    const enum MyEnum {
       propertyOne = 'value1',
       propertyTwo = 'value2',
       //... etc
    }