未捕获的类型错误：无法读取未定义的属性（读取“__H”）

Question

我正在尝试使用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"]
}

主.tsx

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

包.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"
  },
 ...
}

Answer 1

我遇到了类似的错误，挠了我的头几个小时，后来意识到我正在useEffect组件内部使用并且缺少一些导入，然后eslint要求我自动导入缺少的模块，我这样做了，但没有检查它从哪里导入模块编辑器中没有错误，但在构建过程中，后来意识到导入了 eslint，useEffect如下所示。

import { useEffect } from "preact/compat"