TypeScript enum är odefinierad på Webpack-importerad modul
I en Electron-applikation använder jag den senaste Webpack (5.74.0) för att generera ett paket för renderingsprocessen. Paketet genereras utan problem, men jag får undefined när jag försöker komma åt en egenskap på en importerad modul som representerar ett enum-värde.
Så här deklareras min import:
import { SessionViewType } from "util/types";
Filen types exporterar detta enum:
export enum SessionViewType {
SAVED = "SAVED", NEW = "NEW", DELETE = "DELETE"
}
Konstigt nog, om jag uttryckligen lägger till .ts-suffixet till importen försvinner felet:
import { SessionViewType } from "util/types.ts";
Detta påverkar endast enum - problemet gäller även importerade tredjepartsmoduler som använder enum.
Här är min Webpack-konfiguration för renderaren:
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
}
};