In an Electron application, I'm using the latest Webpack (5.74.0) to generate a bundle for the renderer process. The bundle generates fine, but I'm getting undefined when trying to access a property on an imported module that represents an enum value.
Here's how my import is declared:
import { SessionViewType } from "util/types";
The types file exports this enum:
export enum SessionViewType {
SAVED = "SAVED", NEW = "NEW", DELETE = "DELETE"
}
Oddly enough, if I explicitly add the .ts suffix to the import, the error goes away:
import { SessionViewType } from "util/types.ts";
This only affects enums - the issue also applies to imported third-party modules that use enums.
Here's my Webpack configuration for the renderer:
const { resolve } = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const polyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
entry: './src/renderer/entry-point.ts',
target: "electron-renderer",
output: {
path: resolve(__dirname, 'dist', 'renderer'),
filename: 'renderer.js'
},
resolve: {
alias: {
css: resolve(__dirname, "src/renderer/css"),
component: resolve(__dirname, "src/renderer/component"),
img: resolve(__dirname, "src/renderer/img"),
util: resolve(__dirname, "src/renderer/util")
},
extensions: ['.vue', '.js', '.ts']
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader',
]
},
{
test: /\.ts$/,
exclude: /(node_modules)/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
appendTsSuffixTo: [/\.vue$/]
}
}
]
},
{
test: /\.vue$/,
exclude: /(node_modules)/,
loader: 'vue-loader'
},
{
test: /\.(png|jpe?g|gif|svg)$/,
type: "asset/resource"
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin(),
new polyfillPlugin({
includeAliases: ["path"]
})
],
node: {
global: true
}
};