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

package.json

@@ -13,6 +13,7 @@
     "react": "npm:@preact/compat@*",
     "react-dom": "npm:@preact/compat@*",
     "react-redux": "^8.1.3",
+    "redux": "^4.2.1",
     "vike": "0.4.143",
     "vite": "^4.0.3"
   },

renderer/PageShell.jsx

@@ -2,13 +2,21 @@ import logo from './logo.svg'
 import { PageContextProvider } from './usePageContext'
 import './PageShell.css'
 import { Link } from './Link'
+
 import { Provider } from 'react-redux'
+import { getStore } from './store'
 
 export { PageShell }
 
 const PageShell = function ({ children, pageContext }) {
+  // NOTE(aurelien): actually initializing the store here is probably not a good idea as it has to be done in different
+  // ways whether we are on client or on server. So probably this should be moved to +onRenderHtml.jsx and
+  // +onRenderClient.jsx . See also:
+  // * https://github.com/brillout/vike-with-redux/blob/main/renderer/%2BonRenderClient.jsx
+  // * https://redux.js.org/usage/server-rendering
+  const store = getStore({})
   return (
-    <Provider>
+    <Provider store={store}>
       <PageContextProvider pageContext={pageContext}>
         <Layout>
           <Sidebar>

renderer/store.js

@@ -0,0 +1,21 @@
+// Copy-pasted from https://github.com/brillout/vike-with-redux/blob/main/renderer/store.js
+
+import { createStore } from 'redux'
+
+export { getStore }
+
+function getStore(PRELOADED_STATE) {
+  const store = createStore(counterReducer, PRELOADED_STATE)
+  return store
+}
+
+function counterReducer(state = { value: 0 }, action) {
+  switch (action.type) {
+    case 'counter/incremented':
+      return { value: state.value + 1 }
+    case 'counter/decremented':
+      return { value: state.value - 1 }
+    default:
+      return state
+  }
+}

vite.config.js

@@ -8,7 +8,7 @@ const config = {
     include: ['preact/devtools', 'preact/debug', 'preact/jsx-dev-runtime', 'preact', 'preact/hooks'],
   },
   ssr: {
-    noExternal: ['react-redux/*', 'use-sync-external-store/*']
+    noExternal: ['react-redux']
   }
 }