Ошибки 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.

Еще не решил, так как только что узнал, что это было на самом деле.

Другие вопросы по тегам