错误:在TypeScript中使用@导入枚举时，TypeScript没有为发出任何输出

Question

我正在使用typescript和vue3来开发一个googlechrome扩展。当我使用以下代码在typescript中导入枚举时：

import { MessageType } from '@/model/message/MessageType';

编译typescript代码时，显示错误：

./src/background/index.ts 39 bytes [built] [1 error]
ERROR in ./src/background/index.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /Users/dolphin/source/reddwarf/frontend/reddwarf-translate-plugin/src/background/index.ts.
at makeSourceMapAndFinish (/Users/dolphin/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/ts-loader/dist/index.js:52:18)
at successLoader (/Users/dolphin/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/ts-loader/dist/index.js:39:5)
at Object.loader (/Users/dolphin/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/ts-loader/dist/index.js:22:5)
ERROR in /Users/dolphin/source/reddwarf/frontend/reddwarf-translate-plugin/src/background/index.ts

为什么会发生这种事？这是枚举定义：

export enum MessageType {
TRANSLATE = "TRANSLATE"
}

这是webpack5.x配置：

const path = require('path');
const webpack = require( 'webpack' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');
const HtmlWebpackPlugin = require( 'html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
entry : {
'popup/popup' : './src/popup/',
'background/background': './src/background' 
} ,
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
process: 'process/browser',
//'@': path.resolve(__dirname, 'src'),
},
},
output : {
path : path.resolve(__dirname, '../../bundle') ,
filename : '[name].js'
},
module : {
rules : [
{
test: /.ts$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/.vue$/]
},
exclude: /node_modules|.d.ts$/
},
{
test: /.d.ts$/,
loader: 'ignore-loader'
},
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test : /.js$/ ,
exclude : [ /node_modules(?!(/|\?\)(translation.js|selection-widget|connect.io|chrome-env)1)/ ] ,
loader : 'babel-loader'
} ,
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test : /.(scss)$/ ,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
plugins : [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new VueLoaderPlugin(),
new CopyPlugin({
patterns: [
{ from: "src/manifest.json", to: "manifest.json" },
{ from: "src/resource/image", to: "resource/image" },
],
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
new HtmlWebpackPlugin({
filename: 'popup/popup.html',
template: 'src/popup/index.html'
}),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: false,
__VUE_PROD_DEVTOOLS__: false,
}),
]
};

为什么会发生这种事？我该怎么做才能避免这个问题？

Answer 1

此错误可能由多种原因引起。一种可能是您没有包含定义枚举的文件。请确保包含枚举定义的文件包含在您的项目中。

这可能是由于在TypeScript中导入枚举时使用了不正确的@符号。请确保在导入枚举时使用@符号，并且枚举的名称用引号括起来。

Answer 2

您是否尝试在组件的数据部分使用枚举？可能重复：如何在VueJS中使用枚举(或常量(？