TS2307: Cannot find module './App.vue' or its corresponding type declarations

Question

I want to use typescript + Vue 3 to develop a google chrome extension. In the google chrome extension popup index, the typescript code index.ts looks like:

import { createApp } from 'vue'
import App from './App.vue'

document.addEventListener('DOMContentLoaded', () => {
  createApp(App)
    .mount('#app')
})

and the App.vue looks like:

<template lang="pug">
.container
  h1 {{ title }}
  hr
  Options
  hr
  Counter
  hr
  Memos
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Options from './components/Options.vue'
export default defineComponent({
  setup() {
    const title = process.env.APP_NAME
    return {
      title
    }
  },
  components: {
    Options,
  }
})
</script>

<style lang="scss" scoped>
div.container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  h1 {
    margin: 0px;
    padding: 5px 20px;
    font-size: 1.5em;
    font-weight: lighter;
    white-space: nowrap;
  }
  hr {
    size: 1px;
    width: 100%;
    color: gray;
    margin: 0px;
  }
}
</style>

when I run this code, shows error like this:

➜  reddwaf-translate-plugin git:(main) ✗ npm run dev

> reddwaf-translate-plugin@1.0.0 dev
> rm -rf src/bundle && webpack --mode development --config src/resource/config/webpack.dev.config.js

assets by path popup/ 1.47 KiB
  asset popup/popup.js 1.27 KiB [emitted] (name: popup/popup) 1 related asset
  asset popup/popup.html 201 bytes [emitted]
asset resource/image/logo.png 7.14 KiB [emitted] [from: src/resource/image/logo.png] [copied]
asset manifest.json 1.22 KiB [emitted] [from: src/manifest.json] [copied]
./src/popup/index.ts 39 bytes [built] [code generated] [1 error]

ERROR in ./src/popup/index.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /frontend/reddwaf-translate-plugin/src/popup/index.ts.
    at makeSourceMapAndFinish (/frontend/reddwaf-translate-plugin/node_modules/ts-loader/dist/index.js:52:18)
    at successLoader (/frontend/reddwaf-translate-plugin/node_modules/ts-loader/dist/index.js:39:5)
    at Object.loader (/frontend/reddwaf-translate-plugin/node_modules/ts-loader/dist/index.js:22:5)

ERROR in /frontend/reddwaf-translate-plugin/src/popup/index.ts
./src/popup/index.ts 2:16-27
[tsl] ERROR in /frontend/reddwaf-translate-plugin/src/popup/index.ts(2,17)
      TS2307: Cannot find module './App.vue' or its corresponding type declarations.
ts-loader-default_0c5a263502dc9404

webpack 5.67.0 compiled with 2 errors in 955 ms

this is my package.json:

{
  "name": "reddwaf-translate-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rm -rf src/bundle && webpack --mode development --config src/resource/config/webpack.dev.config.js",
    "build": "gulp --cwd . --gulpfile build/gulp-build.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jiangxiaoqiang/reddwaf-translate-plugin.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin/issues"
  },
  "homepage": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin#readme",
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "copy-webpack-plugin": "^10.2.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.5.3",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.5",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@types/chrome": "^0.0.177",
    "@types/webextension-polyfill": "^0.8.2",
    "vue": "^3.2.29",
    "vue-loader": "^15.9.8",
    "vuex": "^4.0.2"
  }
}

and this is the webpack 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");

module.exports = {
  entry : {
    'popup/popup' : './src/popup/' 
  } ,
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
        vue: 'vue/dist/vue.esm-bundler.js'
    },
  },
  output : {
    path : path.resolve(__dirname, '../../bundle') ,
    filename : '[name].js'
  },
  module : {
    rules : [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        },
        exclude: /node_modules/
      },
      
      {
        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 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

About the previous answer, someone already shared a light about it here.

But I've found also that it was a specific problem in Vue + Typescript projects in VSCode. If you're using Volar that is the official plugin for Vue 3 instead Vetur and using typescript in your project, you need also Typescript Vue Plugin (Volar).

Sharing it because that solved my IDE issue. Nothing was wrong with the project, which even with red mark, it was running without any error or warning.

Answer 2

Try placing the following in a src/shims-vue.d.ts file:

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}