-
Notifications
You must be signed in to change notification settings - Fork 590
Description
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).