Preact: TypeError: Cannot read property 'getChildContext' of undefined when trying to switch to Preact existing project (with redux)

[adam4leos]

Ahoy.

I am currently trying to switch existing project (react v16.8 + react-redux v7.1) to preact (trying v10) by using preact & preact/compat aliases in webpack config.
And encountering next problem on application start ->

TypeError: Cannot read property 'getChildContext' of undefined

caused by usage of Provider component (from react-redux).

Code itself ->

import React from 'react';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';


export const createEntrypoint = (ApplicationComponent, { store, persistor, playerInstance }) => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <ApplicationComponent playerInstance={playerInstance} />
    </PersistGate>
  </Provider>
);

Following to the preact-module code it says that Provider has an 'undefined' value as 'this' (create-context file, https://github.com/preactjs/preact/blob/master/src/create-context.js#L14).

Same code works well without Provider so can't figure out what is wrong. Demo from this repo, with redux Provider usage works as well.

Any information will be much appreciated.

[marvinhagemeister]

iirc there was an issue with react-hot-loader rewriting things weirdly which broke context. Just a shot in the dark.

[ppozniak]

I can only add up that I am getting the same error without Redux. It's just freezing my tab.

[andrewiggins]

@ppozniak are you using react-hot-loader too?

[ppozniak]

@ppozniak are you using react-hot-loader too?

Yes I do.

[andrewiggins]

Hmm seems like react-hot-loader is the commonality here and cause of the issue.

[adam4leos]

@andrewiggins @ppozniak @marvinhagemeister hmm, very interesting. I'll investigate this one further. Appreciate your answers here.

[adam4leos]

I can confirm that this issue caused by conflicts with react-hot-loader. Disabling react-hot-loader removes the problem.

I'll try to find out what exactly conflicting, and maybe create same issue for react-hot-loader.

[adam4leos]

Meanwhile, it looks like if you want to use hotloader alias for react-dom (https://github.com/gaearon/react-hot-loader#hot-loaderreact-dom), you'd run into conflict with preact, where we want to set "react-dom": "preact/compat" alias. Anything I'm missing here, how this could be done better?

[LinusCenterstrom]

Having the same problem here, is there any workaround to get react-hot-loader to work with Preact?

[dangreen]

@marvinhagemeister https://github.com/gaearon/react-hot-loader/issues/1445#issuecomment-618726809

[marvinhagemeister]

FYI: We're close to getting an official fast-refresh plugin for Preact out. It supports not just component HMR but also hooks. We'll announce it sometime in the coming weeks and need a bit of time to resolve remaining issues. This is doable without extending options like proposed in the react-hot-loader repo above.