From 10d149aa365c0ea8b0ea18ee8fec2933eecc34a3 Mon Sep 17 00:00:00 2001 From: Aurelien Lourot Date: Thu, 16 Nov 2023 10:48:21 +0100 Subject: [PATCH] Fix `TypeError: Cannot read properties of undefined (reading '__H')` Fixes https://github.com/vikejs/vike/discussions/1235 --- package.json | 1 + renderer/PageShell.jsx | 10 +++++++++- renderer/store.js | 21 +++++++++++++++++++++ vite.config.js | 2 +- 4 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 renderer/store.js diff --git a/package.json b/package.json index 4bd7d63..8b0a65d 100644 --- a/package.json +++ b/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" }, diff --git a/renderer/PageShell.jsx b/renderer/PageShell.jsx index 977d1f0..267386a 100644 --- a/renderer/PageShell.jsx +++ b/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 ( - + diff --git a/renderer/store.js b/renderer/store.js new file mode 100644 index 0000000..d4cac8c --- /dev/null +++ b/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 + } +} diff --git a/vite.config.js b/vite.config.js index a90e3f7..ca374cf 100644 --- a/vite.config.js +++ b/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'] } }