Typescript checking fails to report errors until node_modules are reinstalled

[fephil]

Version

4.2.2

Environment info

Environment Info:

  System:
    OS: macOS 10.15.3
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
  Binaries:
    Node: 12.15.0 - ~/.nvm/versions/node/v12.15.0/bin/node
    Yarn: 1.22.0 - ~/.yarn/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.15.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: Not Found
    Safari: 13.0.5
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.2.2
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.2.2
    @vue/cli-plugin-babel: ~4.2.2 => 4.2.2
    @vue/cli-plugin-e2e-cypress: ~4.2.2 => 4.2.2
    @vue/cli-plugin-eslint: ~4.2.2 => 4.2.2
    @vue/cli-plugin-router: ~4.2.2 => 4.2.2
    @vue/cli-plugin-typescript: ~4.2.2 => 4.2.2
    @vue/cli-plugin-unit-jest: ~4.2.2 => 4.2.2
    @vue/cli-plugin-vuex: ~4.2.2 => 4.2.2
    @vue/cli-service: ~4.2.2 => 4.2.2
    @vue/cli-shared-utils:  4.2.2
    @vue/component-compiler-utils:  3.0.2 (3.1.1)
    @vue/eslint-config-airbnb: ^5.0.2 => 5.0.2
    @vue/eslint-config-typescript: ^5.0.1 => 5.0.1
    @vue/preload-webpack-plugin:  1.1.1
    @vue/test-utils: 1.0.0-beta.31 => 1.0.0-beta.31
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^6.1.2 => 6.2.1
    jest-serializer-vue:  2.0.2
    typescript: ~3.7.5 => 3.7.5
    vue: ^2.6.11 => 2.6.11 (2.6.10)
    vue-chartjs: ^3.5.0 => 3.5.0
    vue-class-component: ^7.2.3 => 7.2.3 (7.1.0)
    vue-cli-plugin-i18n: ~0.6.1 => 0.6.1
    vue-cli-plugin-vuetify: ~2.0.5 => 2.0.5
    vue-eslint-parser:  7.0.0
    vue-hot-reload-api:  2.3.4
    vue-i18n: ^8.15.3 => 8.15.3 (8.15.1)
    vue-i18n-extract:  1.0.2
    vue-i18n-ts:  0.1.0
    vue-jest:  3.0.5
    vue-loader:  15.9.0
    vue-meta: ^2.3.2 => 2.3.2
    vue-property-decorator: ^8.4.0 => 8.4.0
    vue-router: ^3.1.5 => 3.1.5
    vue-socket.io-extended: ^4.0.1 => 4.0.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vuetify: ^2.2.13 => 2.2.13
    vuetify-loader: ^1.3.0 => 1.4.3
    vuex: ^3.0.1 => 3.1.2
    vuex-class: ^0.3.2 => 0.3.2
    vuex-persistedstate: ^2.7.1 => 2.7.1
    vuex-smart-module: ^0.3.4 => 0.3.4
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

• Set up project using typescript 3.7, eslint 6, airbnb preset (with some typescript recommended errors present in the project)
• Run serve task,
• See that there are TS errors and task fails,
• Stop and run the serve task again,
• no reported TS errors, task runs successfully,
• delete node_modules folder and reinstall node_modules using yarn install
• Run serve task,
• See TS errors, task fails,

What is expected?

When running vue serve or build after the first time after install node_modules, the project should fail with multiple Typescript errors.

What is actually happening?

Typescript errors do not appear until node_modules are reinstalled.

---

This issue has been confirmed with two different developers on the same project. I will try to be as clear as I can but this is a strange issue.

I've updated my project to vue-cli 4.2.2 and matched the .eslintrc file to what is generated when starting a new project. After running yarn install, On first run of a serve/build task, the project successfully highlights errors in the Typescript (see second comment).

However, after stopping the task and rerunning build or serve task, the typescript errors never appear in the terminal output and the task is allowed to proceed with no problems. The typescript errors never appear until node_modules are reinstalled. They will then only appear once on first run of a task.

I'm using Yarn 1.22.0 for reference.

EDIT: I've recreated yarn.lock incase of any dependency issue and same problem occurs. Will try with a blank project and updates ASAP with results.

[fephil]

End of output on first run of serve task. Notice that the server doesn't start.

/Users/[a component file path here]
   29:45  error    'item' is defined but never used          vue/no-unused-vars
  118:45  error    'item' is defined but never used          vue/no-unused-vars
  275:21  warning  'Prop' is defined but never used          @typescript-eslint/no-unused-vars
  301:21  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  315:29  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  341:22  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  376:12  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  384:20  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  386:20  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  388:15  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  390:15  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  397:22  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  398:53  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  401:22  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  402:53  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

✖ 15 problems (2 errors, 13 warnings)


 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/vuetify-loader/lib/loader.js??ref--20-0!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./[component path]?vue&type=script&lang=ts& 15:0-59 175:19-32
 @ ./src/[component path]?vue&type=script&lang=ts&
 @ ./src/[component path]
 @ ./src/internal/router/prototype.ts
 @ ./src/internal/router/index.ts
 @ ./src/internal/main.ts
 @ multi (webpack)-dev-server/client?http://[ip]:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

No type errors found
Version: typescript 3.7.5
Time: 27556ms

End of output on second run of serve task (server starts but no TS errors):

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 59980ms                                                                                                                                           12:20:35

No type errors found
Version: typescript 3.7.5
Time: 24974ms

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://[ip]:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

[fephil]

I've tried setting fork-ts-checker async to false with the below code in vue.config.js but I haven't seen a change except for the slower compile time:

    config
      .plugin('fork-ts-checker')
      .tap((args) => {
        const newArgs = args;
        newArgs[0].async = false;
        return newArgs;
      });

[haoqunjiang]

It's the same bug as this one: #3065 (comment)

The errors are lint errors rather than type errors.

It is because, after the first run, the ts-loader compilation result was cached. So on the second run, its cache caused the eslint-loader attached with it also getting skipped.
A simple workaround is to run rm -rf ./node_modules/.cache.