网站搜索

在使用 Vite 构建的 Typescript Preact Redux 应用中出现错误:“Property 'children' 在类型 'VNode' 中缺失,但在类型 'ReactPortal' 中是必需的”


我正在尝试使用 Vite 构建一个 Typescript-Preact-Redux 应用程序,但是 main.tsx 文件:

import { render } from "preact"
import { Provider } from "react-redux"


render(
    <Provider>
        <div />
//      ^^^^^^^
    </Provider>
, document.getElementById("app") as HTMLElement)

...对于 <div /> 有以下类型错误:

Type 'Element' is not assignable to type 'ReactNode'.
  Property 'children' is missing in type 'VNode<any>' but required in type 'ReactPortal'.ts(2322)
index.d.ts(166, 9): 'children' is declared here.
Provider.d.ts(19, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & ProviderProps<AnyAction, unknown>'
(property) JSXInternal.IntrinsicElements.div: JSXInternal.HTMLAttributes<HTMLDivElement>

是否可以配置它使其正常工作,还是我应该放弃 preact 并使用 react?

vite.config.ts

import { defineConfig } from "vite"
import preact from "@preact/preset-vite"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact()],
})

package.json

{
  "name": "monitor",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@reduxjs/toolkit": "1.9.5",
    "preact": "10.13.2",
    "react-redux": "8.0.7"
  },
  "devDependencies": {
    "@preact/preset-vite": "2.5.0",
    "typescript": "5.0.2",
    "vite": "4.3.9"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}