Check TS inside .vue files about fork-ts-checker-webpack-plugin HOT 12 CLOSED

I created a repository to reproduce the issue : https://github.com/Toilal/vue-25-typescript

git clone, yarn install && yarn dev to run the dev server. It display no error, but it should display a type error because of this line.

If I set transpileOnly to false here, the error is properly reported.

 ERROR  Failed to compile with 1 errors                                 22:29:44

 error  in /home/toilal/idea-projects/vue-25-typescript/src/components/HelloWorld.vue.ts

(45,30): error TS2339: Property 'blabla' does not exist on type 'number'.

from fork-ts-checker-webpack-plugin.

This actually can be accomplished by overriding default host behavior with host.resolveModuleNames (just like it is already being done in host.getSourceFile in the source here). I'm working on a PR for this now and hope I can have it ready by tomorrow.

Since this issue is closed, I'll we continue conversation in this open issue I see here: #70

from fork-ts-checker-webpack-plugin.

Hi! :)
Currently there is no logic that filters files by it's extension - we get files from typescript compiler api:

    // select files to check (it's semantic check - we have to include all files :/)
    const filesToCheck = this.program.getSourceFiles();

It looks like there is no .vue files in getSourceFiles() result. It may be invalid tsconfig.json file or bug/missing feature in typescript

from fork-ts-checker-webpack-plugin.

vue files are not compiled directly by tsc. ts code extracted from vue by webpack and send to tsc AFAIK.

from fork-ts-checker-webpack-plugin.

Maybe it would help if you shared a repo demonstrating the issue?

from fork-ts-checker-webpack-plugin.

I'd love to, but can't. It's private project.
This is the proccess I've followed https://sebastiandedeyne.com/posts/2017/typescript-with-laravel-mix

my current webpack.mix.js

const mix = require('laravel-mix');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

// docs: https://github.com/JeffreyWay/laravel-mix/tree/master/docs#readme
mix
    .ts('resources/assets/js/app.ts', 'public/js')
    .extract(['vue', 'vuex', 'jquery', 'axios', 'vue2-dragula', 'element-ui', 'lodash', 'moment', 'vue-class-component'])
    .js('resources/assets/js/home.ts', 'public/js')
    .less('resources/assets/less/app.less', 'public/css')
    .sourceMaps()
;


// run versioning on production only
if (mix.inProduction()) {
    mix.version();
}

mix.webpackConfig({
    // https://webpack.js.org/configuration/devtool/
    // It looks like webpack or vue-loader have a bug :(
    // Vue-loader issue opened: https://github.com/vuejs/vue-loader/issues/620
    devtool: "cheap-module-source-map",//  "cheap-module-eval-source-map", //
    module: {
        rules: [
            { // TS support: https://sebastiandedeyne.com/posts/2017/typescript-with-laravel-mix
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    // transpileOnly: true
                },
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx', '.vue', '.ts', '.tsx'],
    }
});

from fork-ts-checker-webpack-plugin.

here's the file list returned by this.program.getSourceFiles()

[ '/home/toilal/idea-projects/vue-test/node_modules/typescript/lib/lib.es6.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/vnode.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/options.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/plugin.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/vue.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue/types/index.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-class-component/lib/declarations.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-class-component/lib/util.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-class-component/lib/index.d.ts',
  '/home/toilal/idea-projects/vue-test/src/hooks.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-router/types/vue.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-router/types/router.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/vue-router/types/index.d.ts',
  '/home/toilal/idea-projects/vue-test/src/router/index.ts',
  '/home/toilal/idea-projects/vue-test/src/main.ts',
  '/home/toilal/idea-projects/vue-test/src/typings.d.ts',
  '/home/toilal/idea-projects/vue-test/test/unit/index.ts',
  '/home/toilal/idea-projects/vue-test/test/unit/typings.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/chai/index.d.ts',
  '/home/toilal/idea-projects/vue-test/test/unit/specs/Hello.spec.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/mocha/index.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/node/index.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/sinon/index.d.ts',
  '/home/toilal/idea-projects/vue-test/node_modules/@types/sinon-chai/index.d.ts' ]

That's it, .vue component files are missing.

from fork-ts-checker-webpack-plugin.

I've come across slightly related issues with my codebase. The surprising bit is that fork-ts-checker-webpack-plugin appears to gets its list of files purely from the tsconfig file, not from anything webpack is building or producing.

from fork-ts-checker-webpack-plugin.

@RoystonS - I believe that's intentional. The motivation being getting the fastest performance possible. @piotr-oles can confirm

from fork-ts-checker-webpack-plugin.

Sure, I can see why. It's just surprising. e.g. I spent several hours trying to work out why my files were being compiled correctly, but not type-checked, and it was the difference between the files section of my tsconfig.json and my webpack configuration.

I presume the type checker goes directly back to those source files, for speed? That would mean that it wouldn't be able to access bits of TS extracted from .vue files, and similarly wouldn't see the correct content of files that have had, say, strings replaced in them by webpack?

from fork-ts-checker-webpack-plugin.

That would mean that it wouldn't be able to access bits of TS extracted from .vue files, and similarly wouldn't see the correct content of files that have had, say, strings replaced in them by webpack?

As things stand, no.

and it was the difference between the files section of my tsconfig.json and my webpack configuration.

It's worth saying that this is a general behaviour. I think I'm right in saying that it is specific to fork-ts-checker-webpack-plugin and applies to both ts-loader and atl as well. The principal being, that loaders should generally be drop in replacements for tsc. See here for a little more context.

from fork-ts-checker-webpack-plugin.

@RoystonS This behavior is intentional and is described in the readme of the plugin in the "Module resolution" section. I'm sorry that you had to spend a lot of time on this. I will close this issue because it cannot be solved directly in this plugin.

from fork-ts-checker-webpack-plugin.