Closed
Description
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).