Skip to content

Error when server-side rendering custom icon w/ vite #718

@seanparmelee

Description

@seanparmelee

We have a React Router 7 application using AntD 6. We noticed that when using a custom icon (similar to the example), an error is thrown during SSR:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:6356:15)
    at retryNode (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:6664:31)
    at renderNodeDestructive (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:6614:11)
    at finishFunctionComponent (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:5342:13)
    at renderElement (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:5788:11)
    at retryNode (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:6664:31)
    at renderNodeDestructive (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:6614:11)
    at finishFunctionComponent (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:5342:13)
    at renderElement (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:5788:11)
    at retryNode (/Users/sean/Projects/react-router-antd-icons/node_modules/react-dom/cjs/react-dom-server.node.development.js:6664:31)

I've created a reproduction here: https://github.com/seanparmelee/react-router-antd-icons or you can use this stackblitz: https://stackblitz.com/~/github.com/seanparmelee/react-router-antd-icons

One thing of note, I've added a console.log(Icon) in the custom icon to demonstrate that Icon is actually an object containing all the @ant-design/icons exports, rather than being the default Icon component export. Hence the Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. error.

This is only the case in the server-side render (node) context. If you disable ssr in the react-router.config.ts file, then it renders the icon.

I originally mentioned this in #687, but that issue was for a slightly different error (the icon was undefined instead of an object) and I've confirmed this issue still happens in v6 (I'm using 6.1.0).

Metadata

Metadata

Assignees

No one assigned

    Labels

    ReactbugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions