Uncaught TypeError: Cannot read properties of undefined (reading '__H') when using Preact with react-redux Provider API #3261
Description
I'm trying to build a simple Todo App using Preact + Vite + Typescript + Redux.
This is the error I'm getting when using react-redux Provider API to connect ReduxToolkit store with my .
You can check out my GitHub repo here - https://github.com/greatvivek11/TodoApp
But this code has not been pushed there.
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.
vite.config.ts
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"
},
...
}