[英]TS2307: Cannot find module './App.vue' or its corresponding type declarations
I want to use typescript + Vue 3 to develop a google chrome extension.我想使用 typescript + Vue 3 开发一个 google chrome 扩展。 In the google chrome extension popup index, the typescript code
index.ts
looks like:在 google chrome 扩展弹出索引中,typescript 代码
index.ts
看起来像:
import { createApp } from 'vue'
import App from './App.vue'
document.addEventListener('DOMContentLoaded', () => {
createApp(App)
.mount('#app')
})
and the App.vue
looks like: App.vue
看起来像:
<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
:这是我的
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:这是 webpack 配置:
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,
}),
]
};
Try placing the following in a src/shims-vue.d.ts
file:尝试将以下内容放在
src/shims-vue.d.ts
文件中:
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
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.但我还发现这是 Vue + Typescript 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) .
如果您使用的是Vue 3 的官方插件Volar 而不是 Vetur,并且在您的项目中使用 typescript,您还需要Typescript Vue Plugin (Volar) 。
Sharing it because that solved my IDE issue.分享它是因为它解决了我的 IDE 问题。 Nothing was wrong with the project, which even with red mark, it was running without any error or warning.
该项目没有任何问题,即使有红色标记,它也没有任何错误或警告地运行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.