我正在尝试使用 Preact + Vite + Typescript + Redux 构建一个简单的 Todo 应用程序。但我遇到了 redux 和 typescript 的一些兼容性问题。

这是我收到的错误。

Uncaught TypeError: Cannot read properties of undefined (reading '__H')
    at m (react-redux.064eb876.js:3)
    at d (react-redux.064eb876.js:3)
    at d.Provider [as constructor] (react-redux.064eb876.js:1165)
    at d.L [as render] (index.js:506)
    at $ (index.js:178)
    at m (children.js:147)
    at $ (index.js:195)
    at m (children.js:147)
    at $ (index.js:195)
    at M (render.js:36)

我在 vite.config.ts 中将 react & react-dom 别名为 preact-compat 。

export default defineConfig(
  {
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
  alias:
    [
       {find: 'react', replacement: 'preact/compat'},
       {find: 'react-dom', replacement: 'preact/compat'},
    ],
  plugins: [
    preactRefresh()
  ],
});

这是我的 tsconfig.json

{
  "compilerOptions": {
    ...
    "paths": {
      "react": ["node_modules/preact/compat"],
      "react-dom": ["node_modules/preact/compat"]
    }
  },
  "include": ["src", "service-worker.js"]
}

main.tsx

serviceWorker.register();
render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.body!
);

package.json

{
  ...
  "dependencies": {
    "@reduxjs/toolkit": "^1.6.1",
    "preact": "^10.5.10",
    "react-redux": "^7.2.4"
  },
  "devDependencies": {
    "@prefresh/vite": "^2.0.1",
    "@tailwindcss/typography": "^0.3.1",
    "@types/node": "^16.4.8",
    "@typescript-eslint/eslint-plugin": "^4.14.0",
    "@typescript-eslint/parser": "^4.14.0",
    "autoprefixer": "^10.2.1",
    "cross-env": "^7.0.3",
    "dotenv": "^10.0.0",
    "postcss-import": "^14.0.2",
    "prettier": "^2.2.1",
    "tailwindcss": "^2.0.2",
    "typescript": "^4.1.3",
    "vite": "^2.0.0-beta.31"
  },
 ...
}