0

我最近使用 Vue 3 (CLI/Webpack) + PrimeVue 将代码库更新为使用 npm 工作区的 monorepo，并且由于 PrimeVue 组件出现 TS 错误，如下所示：

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"]
}

我的根包.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 再次快乐。

任何帮助，将不胜感激。

谢谢，

4

1 回答 1

0

事实证明，这不是与代码库相关的配置错误，而是 Volar VS Code 扩展问题，几乎与重构同时开始：https ://github.com/johnsoncodehk/volar/discussions/592 。

还没有解决它，因为我刚刚发现它实际上是关于什么的。

于 2022-01-19T09:03:00.317 回答