Preact SSR: Cannot read properties of undefined (reading '__H')

[JeffreyATW]

This is similar to #1071 - it's more of a question of what comes afterward.

I have a Redux-powered Preact SSR app that I'm trying to move over to Vike.

I went ahead and installed react-redux into the vike-preact-server-routing boilerplate library, and surrounded the PageShell in a <Provider> element.

After adding this entry to vite.config.js:

  ssr: {
    noExternal: ['react-redux/*', 'use-sync-external-store/*']
  }

It seems the necessary libraries can find Preact, but I'm encountering what seems to be an ESM/CJS issue:

12:23:23 PM [vike][request(2)] HTTP request: /
12:23:23 PM [vike][request(2)] Following error was thrown by the onRenderHtml() hook defined at Config onRenderHtml defined at /renderer/+onRenderHtml.jsx > export default
TypeError: Cannot read properties of undefined (reading '__H')
    at getHookState (/Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/preact/hooks/src/index.js:137:19)
    at Object.h (/Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/preact/hooks/src/index.js:320:16)
    at Object.call (/Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/react-redux/lib/components/Provider.js:26:30)
    at renderFunctionComponent (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/preact-render-to-string/src/index.js:119:25)
    at _renderToString (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/preact-render-to-string/src/index.js:282:16)
    at _renderToString (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/preact-render-to-string/src/index.js:298:15)
    at Proxy.S (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/preact-render-to-string/src/index.js:80:9)
    at onRenderHtml (/Users/jeffreyatw/Code/Repos/vike-preact-server-routing/renderer/+onRenderHtml.jsx:12:29)
    at file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/node/runtime/renderPage/executeOnRenderHtmlHook.js:16:53
    at file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/shared/hooks/executeHook.js:42:31
    at executeHook (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/shared/hooks/executeHook.js:51:7)
    at executeOnRenderHtmlHook (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/node/runtime/renderPage/executeOnRenderHtmlHook.js:16:35)
    at renderPageAlreadyRouted (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/node/runtime/renderPage/renderPageAlreadyRouted.js:56:36)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at renderPageNominal (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/node/runtime/renderPage.js:257:36)
    at renderPageAlreadyPrepared (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/node/runtime/renderPage.js:113:45)
    at renderPageAndPrepare (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/node/runtime/renderPage.js:93:12)
    at file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/node/plugin/shared/getHttpRequestAsyncStore.js:68:35
    at renderPage (file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/node/runtime/renderPage.js:46:50)
    at file:///Users/jeffreyatw/Code/Repos/vike-preact-server-routing/node_modules/vike/dist/esm/node/plugin/shared/addSsrMiddleware.js:18:27
12:23:23 PM [vike][request(2)] HTTP response / ERR

I have encountered this in other environments, and the problem comes down to the ESM and CJS versions of Preact being loaded. In this particular case, the ESM version of Preact created the component, but the CJS version of Preact is trying to execute a hook on the component, and cannot find it, because it's in the wrong scope.

I thought I'd put this on your radar in case you've experienced this and have any quick solutions. In other environments I forced the use of CJS Preact by requireing it, but that doesn't fly in Vite land.

[brillout]

Such ESM/CJS issues are outside of Vike's realm.

That said, if you can create a reproduction that is minimal, then I'll have a look at it.

[JeffreyATW]

Here you go: https://github.com/JeffreyATW/vike-preact-server-routing/tree/jeffreyatw/react-redux

My change: brillout/vike-preact-server-routing@main...JeffreyATW:vike-preact-server-routing:jeffreyatw/react-redux

[lourot]

@JeffreyATW sorry for the delay, here is my fix: JeffreyATW/vike-preact-server-routing#1

The main part of it being

  ssr: {
    noExternal: ['react-redux'] // instead of 'react-redux/*'
  }

[JeffreyATW]

That solved it - thanks!