`Cannot read properties of undefined` for enum after bundling with webpack-CodePudding

I have a React Library that I want to make buildable using Webpack. The library is written using Typescript. It seems everything is working, but for some reason enums aren't.

When I install the library into my React App, I find Cannot read properties of undefined in the browser console for the enum.

I've tried looking in the outputted bundle and it does appear that the enum is being compiled into the bundle. I feel like I must have a misconfiguration somewhere. Before I was able to bundle with microbundle-crl which we're moving from in favour of Webpack.

Here is my webpack.config.js file:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const DtsBundleWebpack = require('dts-bundle-webpack');

module.exports = {
    mode: 'production',
    entry: './src/index.tsx',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.json', 'jsx', '.js'],
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, //Extract css into files
                    'css-loader', // Turns css into commonjs
                ],
            },
            {
                test: /\.pcss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // Turns css into commonjs
                    'postcss-loader'
                ]
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({ filename: 'randomcompany-components.css' }),
        new DtsBundleWebpack({
            name: '@randomcompany/components',
            main: './dist/src/index.d.ts',
            out: '../index.d.ts',
        }),
    ],
};

My tsconfig.json is as follows:

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "types": ["react", "react-scripts"],
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "dist",
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "isolatedModules": true,
    "preserveConstEnums": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
  "include": ["src", "src/lang"],
  "exclude": ["node_modules", "dist", "src/stories"]
}

My enum is in this format:

export enum Test {
    TestOne = "Test One",
    TestTwo = "Test Two",
    TestThree = "Test Three"
};

export default Test;

CodePudding user response：

You should write it like below:

const Test = {
  TestOne: "Test One",
  TestTwo: "Test Two",
  TestThree: "Test Three",
};

export default Test;

But in my opinion, using enum makes your bundle file a little bit heavy, just advise. use simple JavaScript objects.