Error in empty .ts file -> TS2339: Property '__file' does not exist on type '{}'.

[Christian-Rinne]

my setup in short: 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",
    "laravel-mix": "^6.0",
    "lodash": "^4.17.21",
    "postcss": "^8.3.0",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.29.0",
    "sass-loader": "^8.0.2",
    "ts-loader": "^9.2.2",
    "typescript": "^4.3.2",
    "vue-loader": "^16.2.0",
    "vue-template-compiler": "^2.6.13"
  },

file/folder structur

resources
 | js
 | | pages
 | | | user
 | | | | configuration
 | | | | | - configuration.js
 | | | | | - ConfigurationPage.vue
 | - app.js
 | - init.ts

The init.ts is empty. If i don't have at least one .ts file in my resources folder, the ts-loader throws an exception, says it cant find something to compile. I was reading, it's common to use an empty typescript file.

The Problem

Every time i make a change in ConfigurationPage.vue i got this execption in 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 dont get it, the init.ts is empty. It makes no sense to me.

[Robula]

I got a similar issue with my Vue project but I just rolled back ts-loader to 8.3.0. I also tried multiple versions of 9.x.x and they all produced the same error. I'm on Webpack 5.39.1 and TS 4.3.4.

[tsl] ERROR in /home/rob/DEV/.../ImagePrepSettings.vue.ts(79,22) TS2339: Property 'showModal' does not exist on type 'Vue'. ts-loader-default_0c5a263502dc9404

[johnnyreilly]

I'm not a Vue user - would appreciate help from Vue folks with this. I'm wondering if there's some kind of webpack 4 dependency sneaking in. A minimal reproduction repo would help people working on this

[piotrkabacinski]

I partly solved this issue using transpileOnly flag for development env. among with fork-ts-checker-webpack-plugin. Unfortunately lost dynamic type checking during the compilation process, but I managed to use vue-tsc for this. Anyway, looking forward to better solution for this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing as stale. Please reopen if you'd like to work on this further.