在使用 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" }]
}