Vite构建Typescript-Preact-Redux应用遇类型错误，求解决方案

不用放弃Preact，通过配置别名和类型映射就能解决这个类型错误。问题根源是react-redux基于React的类型系统开发，而Preact的VNode类型与React的ReactNode不兼容，通过Preact官方提供的兼容层preact/compat可以抹平差异。

1. 修改Vite配置（vite.config.ts） #

添加别名映射，让react和react-dom指向preact/compat：

import { defineConfig } from 'vite';
import preact from '@preact/preset-vite';

export default defineConfig({
  plugins: [preact()],
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat',
      'react-dom/test-utils': 'preact/test-utils'
    }
  }
});

2. 修改TypeScript配置（tsconfig.json） #

配置路径映射，让TypeScript将react相关类型指向preact/compat，同时可选开启库类型检查跳过，避免兼容层的小类型冲突：

{
  "compilerOptions": {
    // 保留原有配置，添加以下内容
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    },
    "skipLibCheck": true
  }
}

3. 调整依赖（可选） #

如果你的项目中安装了@types/react或@types/react-dom，建议卸载它们，避免类型冲突：

npm uninstall @types/react @types/react-dom
# 或用yarn
yarn remove @types/react @types/react-dom

验证修改 #

完成配置后，main.tsx中Provider的用法即可正常工作：

import { Provider } from 'react-redux';
import { store } from './store';
import { App } from './App';

export function Main() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

原理：preact/compat是Preact官方提供的兼容层，完全模拟了React的API和类型系统，让react-redux这类为React开发的库可以无缝运行在Preact环境中，同时通过TypeScript的路径映射，让类型检查器认为我们在使用React的类型，从而消除类型不匹配的错误。

内容的提问来源于stack exchange，提问作者AJP