Can't import const enums in webpack with babel project

Question

I am working on a react project which was built using create-react-app and later we ejected and modified the webpack config a lot. Right now I am having a hard time importing const enums from external libraries. I don't have control over that external package. It has the const enums defined in its d.ts files.

I have tried with babel-plugin-use-const-enum babel plugin and preset. It doesn't help me either.

My webpack config:

.....
.....
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [paths.appSrc],
  loader: require.resolve("babel-loader"),
  options: {
    customize: require.resolve("babel-preset-react-app/webpack-overrides"),
    plugins: [
        [require.resolve("babel-plugin-const-enum"), { transform: "constObject" }],
        [require.resolve("@babel/plugin-transform-typescript"), { isTSX: true, optimizeConstEnums: true }],
        [require.resolve("@babel/plugin-transform-react-jsx")],
        [require.resolve("@babel/plugin-proposal-class-properties"), { loose: true }],
        [require.resolve("@babel/plugin-proposal-nullish-coalescing-operator")],
        [require.resolve("@babel/plugin-proposal-optional-chaining"), { isTSX: true }],
        [require.resolve("@babel/plugin-transform-arrow-functions")],
        [require.resolve("@babel/plugin-proposal-private-methods"), { loose: true }],
        [
          require.resolve("babel-plugin-named-asset-import"),
          {
            loaderMap: {
              svg: {
                ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]",
              },
            },
          },
        ],
    ],
    presets: ["@babel/preset-env"],
  },
},
.....
.....

My tsconfig:

{
  "compilerOptions": {
    "typeRoots": ["./typings", "node_modules/@types"],
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "react",
    "downlevelIteration": true
  },
  "exclude": ["dist/**/*"],
}

The problem is that the build is successful but I am facing the runtime issue with all the const enums import like below

Uncaught TypeError: Cannot read properties of undefined (reading '<ConstEnumName>').

Package versions:

"@babel/core": "^7.11.6",
"babel-loader": "^8.1.0",
"typescript": "^3.9.7",
"webpack": "^4.44.2",

Answer 1

According to this thread, where the plugin's creator is involved, babel does not transpile .d.ts files, making it impossible to get enums from there. The only option seems to be migrating your config to use ts-loader and include the .d.ts files that have the enum declarations

tsconfig

{
  ...
  "exclude": ["dist/**/*"],
  "include": ["node_modules/[external_library]/**/*.d.ts"],
}