npx webpack
TS2307: Cannot locate module './App.vue' or its corresponding type declarations.
I am currently utilizing webpack, vue, and typescript.
My webpack configuration is pretty basic. It uses a typescript file as the entry point and generates output in a 'build' folder. I have included the typescript loader and vue loader in the setup.
The build process was smooth until I decided to switch from JavaScript to Typescript (e.g. renaming app.ts to app.js and removing the typescript loader resulted in everything working fine).
To address Vue related issues, I created a tsconfig.json file which helped in reducing errors but one issue persists as indicated above.
(I am taking an approach of learning webpack-vue-typescript step by step without relying on vue cli or vue ui. Though I did use vue cli to generate a vue typescript skeleton project for reference purposes. Upon comparison, I couldn't pinpoint any differences between my code and the one generated by vue cli.)
Complete error message along with a warning:
npx webpack [webpack-cli] Compilation finished assets by status 64.1 KiB [cached] 1 asset orphan modules 227 KiB [orphan] 7 modules runtime modules 495 bytes 2 modules ./src/app.ts + 7 modules 227 KiB [built] [code generated]
WARNING in ./src/App.vue?vue&type=script&lang=ts& 1:166-169 export 'default' (imported as 'mod') was not found in '-!../node_modules/ts-loader/index.js!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=ts&' (possible exports: ) @ ./src/App.vue 2:0-55 3:0-50 3:0-50 9:2-8
ERROR in \src\app.ts [tsl] ERROR in D:\code\vue\fs\src\app.ts(2,17) TS2307: Cannot find module './App.vue' or its corresponding type declarations.
webpack 5.4.0 compiled with 1 error and 1 warning in 3364 ms
Folder structure:
+-- package.json
+-- webpack.config.js
+-- tsconfig.json
+-- src
+-- app.ts
+-- App.vue
+-- index.html
This serves as the entry point in app.ts:
import Vue from 'vue' import App from './App.vue'
new Vue({ render: h => h(App) }).$mount('#app')
Content of App.vue:
<template>
<div>hello from vue</div>
</template>
Webpack.config.js file:
const HtmlWebpackPlugin = require('html-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const path = require('path');
module.exports = {
entry: './src/app.ts',
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new VueLoaderPlugin(),
new CleanWebpackPlugin()
],
devServer: {
inline: true
},
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
}
};
Package.json details:
{
"name": "vue_ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.5.0",
"ts-loader": "^8.0.11",
"typescript": "^4.0.5",
"vue-class-component": "^7.2.6",
"vue-loader": "^15.9.5",
"vue-property-decorator": "^9.0.2",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"vue": "^2.6.12"
}
}
Contents of tsconfig.json:
{
"compilerOptions": {
// this aligns with Vue's browser support
"target": "es5",
// this enables stricter inference for data properties on `this`
"strict": true,
// if using webpack 2+ or rollup, to leverage tree shaking:
"module": "es2015",
"moduleResolution": "node"
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
index.html content:
<html>
<head></head>
<body>
<div id="app"></div>
</body>
</html>
Versions:
- npm 6.14.8
- node 14.15.0
- tsc 4.0.5
- For other versions, refer to the package.json provided above.