React-hot-loader: Issue after upgrading to 4.12.1 from 4.12.0

[razorf80]

After upgrading to react hot loader 4.12.1 I got this error

react-hot-loader.development.js:1400 TypeError: proxy.get is not a function
at resolveType (react-hot-loader.development.js:1646)
at Object.React$$1.createElement (react-hot-loader.development.js:2631)
at _temp.render (dispatchOnEnter.js:86)
at _temp.componentRender [as render] (react-hot-loader.development.js:2084)
at finishClassComponent (react-dom.development.js:14742)
at updateClassComponent (react-dom.development.js:14697)
at beginWork (react-dom.development.js:15645)
at performUnitOfWork (react-dom.development.js:19313)
at workLoop (react-dom.development.js:19353)
at HTMLUnknownElement.callCallback (react-dom.development.js:150)

react-hot-loader.development.js:1091 Uncaught TypeError: proxiesByID[id].update is not a function
at updateProxyById (react-hot-loader.development.js:1091)
at compareComponents (react-hot-loader.development.js:2469)
at hotComponentCompare (react-hot-loader.development.js:2498)
at reconcileSingleElement (react-dom.development.js:12507)
at reconcileChildFibers (react-dom.development.js:12589)
at reconcileChildren (react-dom.development.js:14411)
at finishClassComponent (react-dom.development.js:14759)
at updateClassComponent (react-dom.development.js:14697)
at beginWork (react-dom.development.js:15645)
at performUnitOfWork (react-dom.development.js:19313)

Expected behavior

It should not have that error, as if i downgrade to 4.12.0 it's working fine.

Environment

React Hot Loader version: 4.12.1

Run these commands in the project folder and fill in their results:

1. node -v: v8.12.0
2. npm -v: 6.4.1

Then, specify:

1. Operating system: Mac OS Mojave version 10.14.5
2. Browser and version: Chrome 75.0.3770.100

Reproducible Demo

None at the moment

[theKashey]

Caused by Provider I reckon. It's under RHL management, but not a proxy.

[theKashey]

I am just wordering what you are rendering there.

[razorf80]

It's because we have common component that controls whether the it should show loading progress and when finish display the actual component. See below code. Seems to be failing on method dispatchAction and set state {loading: false, constructed: true}. Below code file is dispatchOnEnter and usage on containers like this

export default compose(
  withTheme,
  dispatchOnEnter(actions.retryRequest),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Viewport);

import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import { compose, identity, equals } from 'ramda';
import setDisplayNameBasedOnWrappedComponent from 'set-display-name-based-on-wrapped-component';
import isPromise from 'is-promise';

import LoadingIndicator from '../containers/LoadingIndicator';

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
`;

export default (action, options = {}) => WrappedComponent => {
  const mapStateToProps = state => ({
    location: state.location,
    locale: state.i18n.locale,
    ...(options.stateMap ? options.stateMap(state) : {}),
  });

  return compose(
    connect(mapStateToProps),
    process.env.NODE_ENV === 'production'
      ? identity
      : setDisplayNameBasedOnWrappedComponent(WrappedComponent, 'DispatchOnEnter')
  )(
    class extends PureComponent {
      constructor(props) {
        super(props);

        this.dispatchAction(props.dispatch);
      }

      state = {
        loading: true,
        constructed: false,
      };

      UNSAFE_componentWillReceiveProps(nextProps) {
        if (
          options.skipLocationChanged &&
          this.props.location.pathname !== nextProps.location.pathname
        )
          return;
        if (
          this.props.location.pathname !== nextProps.location.pathname ||
          (this.props.locale !== nextProps.locale && this.props.locale) ||
          !equals(this.props.selection, nextProps.selection)
        ) {
          this.setState({
            loading: true,
          });

          this.dispatchAction(nextProps.dispatch);
        }
      }

      dispatchAction = dispatch => {
        const act = dispatch(action());
        let promise;
        if (isPromise(act)) {
          promise = act;
        } else {
          promise = Promise.resolve(act);
        }

        promise.then(() => {
          this.setState({
            loading: false,
            constructed: true,
          });
        });
      };

      render() {

        const{loading, constructed} = this.state
        if(!loading && constructed){
          return <WrappedComponent {...this.props} />
        }else{
          return(<Container>
-            <LoadingIndicator />
-          </Container>
          )
        }
      }
    }
  );
};

[theKashey]

Try v4.12.3

[stefanmaric]

Try v4.12.3

I just tested 4.12.3 after failure with 4.12.1 and 4.12.2 and I confirm it is fixed now. :tada:

[razorf80]

Yay thanks it's fixed in 4.12.3 Thanks so much