I am using typescript and vue 3 to develop a google chrome extension. when I am importing an enum in typescript using this code:

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

when compile the typescript code, shows error:

./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

why did this happen? this is the enum define:

export enum MessageType {
    TRANSLATE = "TRANSLATE"
}

and this is the webpack 5.x config:

 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,
      }),
    ]
  };

why did this happen? what should I do to avoid this problem?

CodePudding user response：

This error can be caused by a number of things. One possibility is that you have not included a file that defines the enum. Make sure that the file that contains the enum definition is included in your project.

It may be due to an incorrect usage of the @ symbol when importing an enum in TypeScript. Make sure that the @ symbol is used when importing an enum and that the name of the enum is enclosed in quotes.

CodePudding user response：

Have you tried to use the enum in the data section of your component? Possible duplicate of: How to use enums (or const) in VueJS?