Error: invariant expected app router to be mounted

[stackdev02]

When I add cal.com atoms UI component (), then this error occurs.
I'm using Next.js lastest version and App router. I wrapped CalProvider correctly.

"use client";

import { Connect, AvailabilitySettings } from "@calcom/atoms";

export default function UserPage() {
return (

<Connect.GoogleCalendar />

);
}

[dosubot[bot]]

I couldn't find specific information about the "invariant expected app router to be mounted" error in the context of using @calcom/atoms with Next.js. However, here are a few general troubleshooting steps you can try:

1. Ensure Correct Setup: Double-check that you have set up the CalProvider correctly in your _app.js or _app.tsx file. Make sure all necessary environment variables are configured as described in the setup instructions for using CalProvider in a Next.js application ^[1].

2. Check Next.js Configuration: Verify that your next.config.js file includes the necessary configurations for using Cal.com components, such as transpiling the required packages and optimizing imports ^[2].

3. Component Usage: Ensure that the AvailabilitySettings component is being used correctly within the CalProvider context. This might involve checking if the component requires any specific props or setup.

4. Dependencies: Make sure all dependencies and peer dependencies for @calcom/atoms are correctly installed and compatible with your Next.js version ^[3].

5. Next.js Version: Although there are no known compatibility issues mentioned, ensure that your Next.js version is compatible with the @calcom/atoms package.

If these steps do not resolve the issue, consider isolating the problem by testing with a minimal setup or checking for any additional logs or error messages that might provide more context.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[stackdev02]

not-found-boundary.js:37 Uncaught Error: invariant expected app router to be mounted
at Object.h (index-qa9JiYnM.js:17700:31)
at Syn (index-qa9JiYnM.js:151015:18)
at renderWithHooks (react-dom.development.js:11121:18)
at mountIndeterminateComponent (react-dom.development.js:16869:13)
at beginWork$1 (react-dom.development.js:18458:16)
at beginWork (react-dom.development.js:26927:14)
at performUnitOfWork (react-dom.development.js:25748:12)
at workLoopSync (react-dom.development.js:25464:5)
at renderRootSync (react-dom.development.js:25419:7)
at recoverFromConcurrentError (react-dom.development.js:24597:20)
at performSyncWorkOnRoot (react-dom.development.js:24899:20)
at flushSyncWorkAcrossRoots_impl (react-dom.development.js:7758:13)
at flushSyncWorkOnAllRoots (react-dom.development.js:7718:3)
at processRootScheduleInMicrotask (react-dom.development.js:7863:3)
at eval (react-dom.development.js:8034:7)
auth.ts:22 The above error occurred in the component:

at Syn (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:151015:18)
at ja (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:151007:12)
at qH (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:64662:21)
at div
at div
at div
at div
at hfe (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:64635:25)
at zXt (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:64780:21)
at div
at Ac (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:53391:21)
at GAs (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:65357:15)
at div
at UserPage
at ClientPageRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/client-page.js:14:11)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
at main
at div
at Layout (webpack-internal:///(app-pages-browser)/./app/(main)/user/layout.tsx:19:11)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11)
at l (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:4555:28)
at DM (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:6267:29)
at XSs (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:170571:21)
at Ioe (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:2734:19)
at kre (webpack-internal:///(app-pages-browser)/./node_modules/@calcom/atoms/dist/index-qa9JiYnM.js:170711:21)
at eval (webpack-internal:///(app-pages-browser)/./app/this/providers/calcom-provider.tsx:14:11)
at I18nextProvider (webpack-internal:///(app-pages-browser)/./node_modules/react-i18next/dist/es/I18nextProvider.js:10:3)
at TranslateProvider (webpack-internal:///(app-pages-browser)/./app/this/providers/translate-provider/index.tsx:18:11)
at H (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.mjs:54:24)
at J (webpack-internal:///(app-pages-browser)/./node_modules/next-themes/dist/index.mjs:47:47)
at NextThemeProvider (webpack-internal:///(app-pages-browser)/./app/this/providers/theme-provider.tsx:10:11)
at Provider (webpack-internal:///(app-pages-browser)/./node_modules/react-redux/dist/react-redux.mjs:1053:3)
at ReduxProvider (webpack-internal:///(app-pages-browser)/./app/this/providers/redux-provider.tsx:12:11)
at body
at html
at RootLayout (webpack-internal:///(app-pages-browser)/./app/layout.tsx:25:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ReactDevOverlay.


This is the detail error message

[dosubot[bot]]

The error message you're encountering, "invariant expected app router to be mounted," suggests that there might be an issue with how the app router is being used or mounted in your Next.js application. Here are a few steps you can take to troubleshoot and potentially resolve this issue:

1. Ensure Correct Usage of App Router: Verify that the app router is correctly set up in your Next.js application. This includes ensuring that your pages and components are properly wrapped and that the app router is correctly initialized.

2. Check Component Hierarchy: Make sure that the CalProvider and any other context providers are correctly wrapping your components. The CalProvider should be at a higher level in the component tree to ensure that all child components have access to the necessary context.

3. Review Error Boundaries: The error message mentions a NotFoundErrorBoundary. Ensure that any error boundaries in your application are correctly implemented and that they do not interfere with the app router's functionality.

4. Inspect Dependencies: Double-check that all dependencies, especially those related to routing and context management, are up to date and compatible with your version of Next.js.

5. Simplify and Isolate: Try to isolate the problem by creating a minimal version of your application. Remove components one by one to identify if a specific component or configuration is causing the issue.

If these steps do not resolve the issue, consider reviewing the Next.js and @calcom/atoms documentation for any additional configuration or compatibility notes that might be relevant to your setup.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[stackdev02]

I resolved this error. Cal.com Atoms SDK does not support Nextjs App router. Should you Page router instead that one.
Thanks