'Functions are not valid as a React child' when trying to dynamically include Components for SSR bundle

Question

From my express route I'm trying to pass a component to use in a render function, that handles SSR.

Express Route:

import SettingsConnected from '../../../client/components/settings/settings-connected';

function accountTab(req, res, next) {
  sendToRenderApp(req, res, { profileInfo }, url, SettingsConnected);
}

Render helper:

export const sendToRenderApp = (req, res, storeObj = {}, urlPath, componentFunc) => {
  const store = configureStore(storeObj);
  const dynamicComponent = componentFunc;

  const component = (
    <Provider store={store}>
      <React.Fragment>
        <dynamicComponent />
      </React.Fragment>
    </Provider>
  );

  const sheet = new ServerStyleSheet();
  const app = renderToString(sheet.collectStyles(component));

Error:

"Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it."

Things I've already had a look at include this answer below, but I'm not sure how to wrap such a function inside (what I presume) the Provider component?

Functions are not valid as a React child. This may happen if you return a Component instead of from render

Try to put a Capital first letter for your component : `const DynamicComponent = componentFunc;` ... — Jayffe, Jul 27 '18 at 11:23
@Jayffe fair call, but that doesn't work I'm afraid. Same error. — Harry Lincoln, Jul 27 '18 at 11:26

score 0 · Answer 1 · answered Jul 27 '18 at 13:30

0

ANSWERING OWN QUESTION: Turned out to be a problem with the client's hydrate. This piece of code above was fine all along - :facepalm:

answered Jul 27 '18 at 13:30

Harry Lincoln

614
2
9
30

'Functions are not valid as a React child' when trying to dynamically include Components for SSR bundle

1 Answers1