Typescript error when installing fresh Vue 3 (with router and store)
Version
3.0.2
Reproduction link
https://codesandbox.io/s/serverless-smoke-nblju?file=/src/main.ts
Steps to reproduce
vue create project-name
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, TS, Router, Vuex, CSS Pre-processors, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint and fix on commit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
cd project-name
What is expected?
No typescript errors
What is actually happening?
main.ts:6 shows the following typescript error:
Error:(6, 11) TS2345: Argument of type 'typeof import("D:/sgn/www/_t/cb/node_modules/vue/dist/vue")' is not assignable to parameter of type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
Type 'typeof import("D:/sgn/www/_t/cb/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptions<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>'.
Type 'typeof import("D:/sgn/www/_t/cb/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptionsBase<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 4 more ..., {}>'.
Types of property 'computed' are incompatible.
Type '{ <T>(getter: ComputedGetter<T>): ComputedRef<T>; <T>(options: WritableComputedOptions<T>): WritableComputedRef<T>; }' is not assignable to type 'Record<string, ComputedGetter<any> | WritableComputedOptions<any>>'.
Index signature is missing in type '{ <T>(getter: ComputedGetter<T>): ComputedRef<T>; <T>(options: WritableComputedOptions<T>): WritableComputedRef<T>; }'.
The sandbox doesn't display the issue, but displays others. However, I have gone through each file and made sure it's what I have on local.
Here's a screenshot of the above error: https://i.stack.imgur.com/piYtI.png
Notes:
- I've also tried upgrading
typescript
to3.9.7
, hoping this would go away. - In the sandbox I had to add
"tslib": "2.0.3",
to deps, otherwise it doesn't build.
No idea why the sandbox shows errors around the imports in ./main.ts
, they don't show up on local.
Obviously, if you need more details, I'll provide.
Note the project is untouched. It's what one gets upon installing a fresh vue@next
using @vue/cli
If it matters, I'm using WebStorm.
I tried on a fresh project and there are no TS errors.
Remember we have a forum and a Discord chat to ask questions!
Incorrect type description of TS loader when exporting, reference configuration:
// @workDir/typings.d.ts
/* declare module '*.vue' { // NOTE: 非ts-loader
// const value: WebpackContent;
import Vue from 'vue';
export default Vue;
} */
declare module '*.vue' { // NOTE: ts-loader
import { defineComponent } from 'vue';
const component: ReturnType<typeof defineComponent>;
export default component;
}