Uncaught TypeError: Cannot read properties of undefined (reading '__H')

Question

I'm trying to build a simple Todo App using Preact + Vite + Typescript + Redux. But I am facing some compatibility issues with redux and typescript.

This is the error I'm getting.

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)

I have aliased react & react-dom in vite.config.ts to preact-compat.

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

Here is my 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"
  },
 ...
}

Answer 1

I got a similar error scratched my head for hours and later on realized that I was using useEffect inside my component and had some missing imports then eslint asked me to automatically import missing modules & I did that and didn't check where it imported modules from as there was no error in the editor but in the build process, later on, realized that eslint imported useEffect shown below.

import { useEffect } from "preact/compat"