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. 👍