[vue3] compilation error in tests with TS project

[cexbrayat]

Version

4.5.0

Reproduction link

https://github.com/cexbrayat/vue-cli-playground

Environment info

macOS

Steps to reproduce

vue create vue-cli-playground -m yarn --inlinePreset '{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-typescript": {"classComponent": false},"@vue/cli-plugin-unit-jest": {}},"vueVersion": "3"}'
cd vue-cli-playground
yarn serve

What is expected?

The applications starts with no error

What is actually happening?

The application starts but the compiler throws:

ERROR in /Users/ced-pro/Code/test/cli-tests/vue-cli-playground/tests/unit/example.spec.ts(7,34):
7:34 No overload matches this call.
  The last overload gave the following error.
    Argument of type '{}' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, unknown, unknown, {}, {}, Record<string, any>, ComponentOptionsMixin, ComponentOptionsMixin, string, Readonly<...> | Readonly<...>>'.
      Property 'props' is missing in type '{}' but required in type '{ props: readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>; }'.
     5 |   it('renders props.msg when passed', () => {
     6 |     const msg = 'new message'
  >  7 |     const wrapper = shallowMount(HelloWorld, {
       |                                  ^
     8 |       props: { msg }
     9 |     })
    10 |     expect(wrapper.text()).toMatch(msg)

---

The real issue is that even if we update the shim, the error does not go away.
For example, typing component as any should do the trick:

declare module '*.vue' {
  const component: any
  export default component
}

But the error is the same. It looks like the shim is not properly picked up (even if removing the cache before launching yarn serve).

My current workaround is to disable the fork-ts-checker plugin that seems to be the culprit.

module.exports = {
  chainWebpack: config => {
    // fork-ts-checker is sadly ignoring the Vue shim
    // and throws incorrect errors
    // we disable it as it is just a nice to have to speed up the build
    config.plugins.delete('fork-ts-checker');
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap(options => {
        return { ...options, transpileOnly: false };
      });
  }
};

With this plugin disabled, the application compiles fine. (note that I had the same issue when using vue-next-plugin previously).

[haoqunjiang]

Seems updating the fork-ts-checker-webpack-plugin helps.
But that's breaking change for the CLI plugin…

[cexbrayat]

👍
Maybe we could make the Vue 3 preset use the newer version of the plugin?

Or if we can't, even if it is breaking, might be a good thing to update it anyway?