Ошибки TypeScript в кодовой базе Vue 3 mono repo
Недавно я обновил кодовую базу с помощью Vue 3 (CLI/Webpack) + PrimeVue до монорепозитория с использованием рабочих пространств npm, и с тех пор у меня есть ошибки TS с компонентами PrimeVue, например:
JSX element class does not support attributes because it does not have a 'props' property.
'__VLS_58' cannot be used as a JSX component.
Its instance type 'InputText' is not a valid JSX element.
Мое репо имеет следующую структуру:
- apps
-- api
-- ui <--- Vue 3 code base
--- src
--- dist
--- node_modules
--- tsconfig.json
- node_modules
- tsconfig.base.json
Мой tsconfig.json:
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "./../../tsconfig.base.json",
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"composite": true,
"declaration": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["webpack-env", "jest"],
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": ["node_modules"]
}
Мой tsconfig.base.json:
{
"exclude": ["node_modules"],
"rootDirs": ["apps/**/**/*.ts", "apps/**/**/*.tsx", "apps/**/**/*.vue"],
"include": ["./apps/b2b/**/*.ts", "./apps/b2b/**/*.tsx", "./apps/**/**/*.vue"]
}
Мой корневой package.json:
{
"name": "xxx",
"version": "0.1.0",
"private": true,
"workspaces": [
"./apps/*"
]
}
И в качестве примера InputText.d.ts (один из компонентов, который вызывает ошибки):
import { InputHTMLAttributes } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export interface InputTextProps extends InputHTMLAttributes {
/**
* Value of the component.
*/
modelValue?: string | undefined;
}
export interface InputTextSlots {
}
export declare type InputTextEmits = {
/**
* Emitted when the value changes.
* @param {string} value - New value.
*/
'update:modelValue': (value: string | undefined) => void;
}
declare class InputText extends ClassComponent<InputTextProps, InputTextSlots, InputTextEmits> { }
declare module '@vue/runtime-core' {
interface GlobalComponents {
InputText: GlobalComponentConstructor<InputText>
}
}
/**
*
* InputText renders a text field to enter data.
*
* Demos:
*
* - [InputText](https://www.primefaces.org/primevue/showcase/#/inputtext)
*
*/
export default InputText;
Я не могу понять, какая зависимость кажется сломанной и как снова сделать TS счастливым.
Любая помощь будет оценена по достоинству.
Спасибо,
1 ответ
Оказывается, это не ошибка конфигурации, связанная с базой кода, а проблема с расширением кода Volar VS, которая началась почти одновременно с рефакторингом: https://github.com/johnsoncodehk/volar/discussions/592.
Еще не решил, так как только что узнал, что это было на самом деле.