I got FUNCTION_INVOCATION_FAILED in Vercel

Question

I do not get eny error in local, only in production. I have a super simple getServerSideProps. what is wrong?

export const getServerSideProps: GetServerSideProps = async (ctx) => {
    return {
        props: {
            organizationId: ctx.params?.organizationId,
            eventId: ctx.params?.eventId,
        },
    }
}

Can following warning cause any crash?

react-dom.development.js?61bb:67 Warning: Expected server HTML to contain a matching <details> in <aside>.
    at details
    at Details (webpack-internal:///./components/Dashboard/Details.tsx:30:23)
    at SidebarItem (webpack-internal:///./components/Dashboard/DashboardSidebar/SidebarItem.tsx:27:23)
    at aside
    at DashboardSidebar (webpack-internal:///./components/Dashboard/DashboardSidebar/index.tsx:25:23)
    at div
    at div
    at Layout (webpack-internal:///./components/Layout.tsx:16:23)
    at DashboardLayout (webpack-internal:///./components/Dashboard/DashboardLayout.tsx:57:23)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:16:20)
    at MyApp (webpack-internal:///./pages/_app.tsx:45:24)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:151:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:642:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:771:24)
printWarning @ react-dom.development.js?61bb:67
error @ react-dom.development.js?61bb:43
warnForInsertedHydratedElement @ react-dom.development.js?61bb:9733
didNotFindHydratableInstance @ react-dom.development.js?61bb:10512
insertNonHydratedInstance @ react-dom.development.js?61bb:14509
tryToClaimNextHydratableInstance @ react-dom.development.js?61bb:14580
updateHostComponent @ react-dom.development.js?61bb:17610
beginWork @ react-dom.development.js?61bb:19080
beginWork$1 @ react-dom.development.js?61bb:23940
performUnitOfWork @ react-dom.development.js?61bb:22776
workLoopSync @ react-dom.development.js?61bb:22707
renderRootSync @ react-dom.development.js?61bb:22670
performSyncWorkOnRoot @ react-dom.development.js?61bb:22293
scheduleUpdateOnFiber @ react-dom.development.js?61bb:21881
updateContainer @ react-dom.development.js?61bb:25482
eval @ react-dom.development.js?61bb:26021
unbatchedUpdates @ react-dom.development.js?61bb:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:26020
hydrate @ react-dom.development.js?61bb:26086
renderReactElement @ index.tsx?8abf:518
doRender @ index.tsx?8abf:776
_callee2$ @ index.tsx?8abf:413
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?a954:3
_next @ asyncToGenerator.js?a954:25
eval @ asyncToGenerator.js?a954:32
eval @ asyncToGenerator.js?a954:21
_render @ index.js:515
render @ index.js:452
eval @ next-dev.js?53bc:85
eval @ fouc.js?937a:14
requestAnimationFrame (async)
displayContent @ fouc.js?937a:5
eval @ next-dev.js?53bc:84
Promise.then (async)
eval @ next-dev.js?53bc:31
eval @ next-dev.js?53bc:31
./node_modules/next/dist/client/next-dev.js @ main.js?ts=1648730028645:682
__webpack_require__ @ webpack.js?ts=1648730028645:873
checkDeferredModules @ webpack.js?ts=1648730028645:46
webpackJsonpCallback @ webpack.js?ts=1648730028645:33
(anonymous) @ webpack.js?ts=1648730028645:1015
(anonymous) @ webpack.js?ts=1648730028645:1023
Show 3 more frames
react-dom.development.js?61bb:67 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    at a
    at Link (webpack-internal:///./node_modules/next/dist/client/link.js:88:19)
    at li
    at ul
    at div
    at div
    at Dropdown (webpack-internal:///./components/Navbar/Dropdown.tsx:27:26)
    at a
    at div
    at nav
    at Navbar (webpack-internal:///./components/Navbar/index.tsx:43:31)
    at Layout (webpack-internal:///./components/Layout.tsx:16:23)
    at DashboardLayout (webpack-internal:///./components/Dashboard/DashboardLayout.tsx:57:23)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:16:20)
    at MyApp (webpack-internal:///./pages/_app.tsx:45:24)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:151:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:642:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:771:24)

---

    return (
        <details
            open={isOpen ?? isOpenLocal}
            className={styles.details}
            {...rest}>
            <summary
                className={styles.summary}
                onClick={(e) => {
                    e.preventDefault()
                    onClickSummary && onClickSummary()
                    setOpen ? setOpen(!isOpen) : setOpenLocal(!isOpenLocal)
                }}>
                <span className={styles.title}>
                    {iconComponent !== undefined && (
                        <span className={styles.leftIcon}>{iconComponent}</span>
                    )}
                    <span>{title}</span>
                </span>
                <span className={styles.rightIcon}>
                    <ArrowIosDownwardOutline />
                </span>
            </summary>
            {children}
        </details>
    )
}

export default Details

and

const DashboardSidebar: FC<Props> = ({ children, className, ...rest }) => {
  return (
    <aside className={`${styles.sidebar} ${className}`} {...rest}>
      {children}
    </aside>
  );
};

export default DashboardSidebar;

Answer 1

Based on the comment above and stacktrace

react-dom.development.js?61bb:67 Warning:
 Expected server HTML to contain a matching <details> in <aside>.

, you should look at the validity of {children} not existing and if it doesn't don't return the DhashboardSidebar component.

Here is a accepted solution that helps you check if {children} are null

https://stackoverflow.com/a/64396494/13749957