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

Posted 2023-02-16

【中文标题】未捕获的类型错误：无法读取未定义的属性（读取“__H”）

【英文标题】：Uncaught TypeError: Cannot read properties of undefined (reading '__H')

【发布时间】：2021-11-07 10:56:25

【问题描述】：

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

【问题讨论】：

有什么理由不使用 Preact 的 Vite 预设 (github.com/preactjs/preset-vite)？可能只是错误地设置了您的 Vite 配置。

感谢您的信息。我就是这样做的，但现在我的构建没有发生。当我运行 npm run dev 时，会发生这种情况 - [rollup-plugin-dynamic-import-variables] Identifier 'h' has already been declared (1:54) file: /Users/vivek/Projects/TasksApp/TodoApp/src/main.tsx:1:54 error during build: SyntaxError: Identifier 'h' has already been declared (1:54)

是的，Vite 预设会通过将import h from 'preact' 添加到您的文件中来自动进行 JSX 注入。不要自己写。

哦，谢谢你的信息。那我一定要看看。

@rschristian 我添加了 preact-vite-preset 但现在我收到此错误Uncaught SyntaxError: The requested module '/node_modules/.vite/preact_devtools.js?v=35418fc9' does not provide an export named 'addHookName'。

【参考方案1】：

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

import useEffect from "preact/compat"