Error: TypeScript emitted no output for when import enum using @ in typescript

Question

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?

XPTO · Accepted Answer · 2022-01-31 03:05:28Z

1

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.

answered Jan 31, 2022 at 3:05

XPTO

1392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dolphin Over a year ago

Yes, you are right. I finally found the path resolved was not the path I want.@XPTO

EspressoCode · Accepted Answer · 2022-01-31 04:22:58Z

0

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?

answered Jan 31, 2022 at 4:22

EspressoCode

3653 silver badges12 bronze badges

Collectives™ on Stack Overflow

Error: TypeScript emitted no output for when import enum using @ in typescript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related