Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 2 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

piotrkabacinskicommented, Aug 25, 2021

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.

1reaction

Robulacommented, Jun 22, 2021

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