Here's a brief overview of my setup: laravel 8 typescript vuejs
tsconfig.js
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false
},
"include": [
"resources/js/**/*",
]
}
webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/pages/user/configuration/configuration.js', 'public/js/pages/user/configuration')
.postCss('resources/css/app.css', 'public/css')
.postCss('node_modules/animate.css/animate.min.css', 'public/css')
.sass('resources/sass/toolbox.scss', 'public/css')
.vue()
.webpackConfig({
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] },
exclude: /node_modules/,
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
}
});
ConfigurationPage.vue
<template>
<div class="col col-12 col-xl-6 d-flex tb-m-b-25">
{{ greeting }}
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
const greeting= ref('hello');
return {
greeting
}
}
}
</script>
<style></style>
DevDependencies in my package.json:
"devDependencies": {
"@vue/compiler-sfc": "^3.0.11",
"axios": "^0.21.1",
"cross-env": "^7.0",
...
},
file/folder structure
resources
| js
| | pages
| | | user
| | | | configuration
| | | | | - configuration.js
| | | | | - ConfigurationPage.vue
| - app.js
| - init.ts
The init.ts file is empty. If I don't have at least one .ts file in my resources folder, the ts-loader throws an exception saying it can't find something to compile. It's common practice to use an empty TypeScript file for this purpose.
The Problem
Every time I make a change in ConfigurationPage.vue, I encounter this exception while running npm run watch-poll:
✖ Mix
Compiled with some errors in 510.02ms
ERROR in /var/www/resources/js/init.ts
2:7-13
[tsl] ERROR in /var/www/resources/js/init.ts(2,8)
TS2339: Property '__file' does not exist on type '{}'.
webpack compiled with 1 error
I don't understand it, the init.ts file is empty. This doesn't make sense to me.