Error walking your react tree

[gurnzbot]

I am attempting to use this library for SSR.

I go to the route that loads the only async component I have in my app at the moment, and get the following error in the server console:

TypeError: _this.context.asyncComponents.getNextId is not a function
    at new AsyncComponent (/Users/markcampbell/Desktop/Mercury React Cart/node_modules/react-async-component/commonjs/asyncComponent.js:94:56)
    at /Users/markcampbell/Desktop/Mercury React Cart/node_modules/react-tree-walker/commonjs/index.js:131:24
    at new Promise (<anonymous>)
    at reactTreeWalker (/Users/markcampbell/Desktop/Mercury React Cart/node_modules/react-tree-walker/commonjs/index.js:70:10)
    at mapper (/Users/markcampbell/Desktop/Mercury React Cart/node_modules/react-tree-walker/commonjs/index.js:88:29)
    at /Users/markcampbell/Desktop/Mercury React Cart/node_modules/react-tree-walker/commonjs/index.js:52:28
    at /Users/markcampbell/Desktop/Mercury React Cart/node_modules/react-tree-walker/commonjs/index.js:38:14
    at <anonymous>
(node:32826) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: _this.context.asyncComponents.getNextId is not a function
(node:32826) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Routes.js

const Home = asyncComponent({
    resolve: () => import("../components/home/Home")
});

export default [
    {
        path: "/",
        exact: true,
        component: Home
    }
];

Home.js

import { connect } from "react-redux";

// Components
import Banners from "./Banners";
import Promos from "./Promos";

// Banners state
import { getBanners } from "../../store/actions/banners";

class Home extends Component {
    static initialAction(store, props) {
        let res = store !== null ? getBanners() : props.getBanners();
        return res;
    }

    componentDidMount() {
        // console.log('HOME BANNERS:', this.props.banners, !this.props.banners)
        if (!this.props.banners) {
            Home.initialAction(null, this.props);
        }
    }

    render() {
        return (
            <div>
                <Banners />
                <Promos />
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        banners: state.banners.banners
    };
};

export default connect(mapStateToProps, { getBanners })(Home);

I'm guessing it's because of the initialAction static function that preloads any data necessary from the store...??

Any help is more than welcome :)

[ctrlplusb]

It looks like you are trying to preload some data. You could write your own implementation to do this using react-async-bootstrapper (which supports react-async-component), or you could alternatively use my library react-jobs to achieve something similar. I am updating react-async-component and react-jobs to use the new versions of react-async-bootstrapper though, so just a friendly heads up there. 👍