Compatibility with react-component-caching

[greatwitenorth]

Bug, Feature, or Question?

I cannot seem to get react-component-caching working with after.js.

Current Behavior

I've defined a customerRenderer:

server
    .disable('x-powered-by')
    .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
    .get('/*', async (req, res) => {
        try {
            const customRenderer = async (node) => {
                const html = await ReactCC.renderToString(node, cache);
                return {
                    html
                }
            };

            const html = await render({
                req,
                res,
                document: MyDocument,
                customRenderer,
                routes,
                assets,
                // Anything else you add here will be made available
                // within getInitialProps(ctx)
                // e.g a redux store...
                customThing: 'thing',
            })

            res.send(html);
        } catch (error) {
            console.log(error);
            res.json(error);
        }
    });

When I visit the home page I get the following error:

TypeError: element.type.toLowerCase is not a function

  24 |     .get('/*', async (req, res) => {
  25 |         try {
> 26 |             const customRenderer = async (node) => {
  27 |                 const html = await ReactCC.renderToString(node, cache);
  28 |                 return {
  29 |                     html

    at ReactDOMServerRenderer.renderDOM (/myproject/node_modules/react-component-caching/development.js:2472:28)
    at ReactDOMServerRenderer.render (/myproject/node_modules/react-component-caching/development.js:2466:21)
    at ReactDOMServerRenderer.read (/myproject/node_modules/react-component-caching/development.js:2336:21)
    at Object.renderToString (/myproject/node_modules/react-component-caching/development.js:2672:31)
    at _callee$ (/myproject/src/server.js:26:1)
    at tryCatch (/myproject/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/myproject/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/myproject/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/myproject/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /myproject/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14

Desired Behavior

I expect the page to show without an error.

Suggested Solutions

I'm not really sure how to fix this. My understanding is that react-component-caching renderToString is supposed to be compatible with React's renderToString. I suppose this could possibly be an issue with react-component-caching as well.

Additional Information

---

• After.js Version: 1.3.1
• Razzle Version: 2.4.0
• React Version: 16.6.3
• TypeScript Version:
• OS: macOS 10.14
• Node Version: 10.9.0
• Package Manager and Version: npm 6.2.0
• Demo Repo or Link:

[greatwitenorth]

Closing as this looks like it might not be an issue with After.js and rather an issue with react-component-caching:
rookLab/react-component-caching#46