Issue with importing NylasScheduling

web:dev: Module Not Found | Next.js
web:dev:
web:dev:
web:dev: ⨯ ./node_modules/.pnpm/@nylas+react@1.3.6_@stencil+core@4.27.2_rollup@3.29.5/node_modules/@nylas/react/dist/index-7e7c24f1.js:839:10
web:dev: Module not found: Can’t resolve ‘./’ ‘.entry.js’

I get the following error when using dynamic loading with the NylasScheduling component in my next.js app.

Here is the code

'use client';

import dynamic from 'next/dynamic';
import { NylasScheduling } from '@nylas/react';

interface BookingInfo {
  primaryParticipant: {
    name: string;
    email: string;
  };
  guests: Array<{
    name: string;
    email: string;
  }>;
}

interface SchedulingCalendarProps {
  bookingInfo: BookingInfo;
}

const DynamicNylasScheduling = dynamic(() => Promise.resolve(NylasScheduling), {
  ssr: false,
});

export function SchedulingCalendar({ bookingInfo }: SchedulingCalendarProps) {
  return (
    <DynamicNylasScheduling
      mode="app"
      clientId={process.env.NEXT_PUBLIC_NYLAS_CLIENT_ID}
      enableUserFeedback={false}
      bookingInfo={bookingInfo}
    />
  );
} 

@curvejumpinc thanks for reaching out, let me take a look and report back.

Can you share your package.json and other config as a starting point, and I can see if this can be reproduced.

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "analyze": "ANALYZE=true pnpm run build",
    "build": "pnpm with-env next build",
    "build:test": "NODE_ENV=test pnpm with-env:test next build",
    "clean": "git clean -xdf .next .turbo node_modules",
    "dev": "pnpm with-env next dev --turbo | pino-pretty -c",
    "lint": "eslint .",
    "lint:fix": "next lint --fix",
    "format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json}\"",
    "start": "pnpm with-env next start",
    "start:test": "NODE_ENV=test pnpm with-env:test next start",
    "typecheck": "tsc --noEmit",
    "with-env": "dotenv -e ./.env.local --",
    "with-env:test": "dotenv -e ./.env.test --",
    "supabase": "supabase",
    "supabase:start": "supabase status || supabase start",
    "supabase:stop": "supabase stop",
    "supabase:reset": "supabase db reset",
    "supabase:status": "supabase status",
    "supabase:test": "supabase db test",
    "supabase:db:lint": "supabase db lint",
    "supabase:deploy": "supabase link --project-ref $SUPABASE_PROJECT_REF && supabase db push",
    "supabase:typegen": "pnpm run supabase:typegen:packages && pnpm run supabase:typegen:app",
    "supabase:typegen:packages": "supabase gen types typescript --local > ../../packages/supabase/src/database.types.ts",
    "supabase:typegen:app": "supabase gen types typescript --local > ./lib/database.types.ts",
    "supabase:db:dump:local": "supabase db dump --local --data-only"
  },
  "dependencies": {
    "@11labs/react": "^0.0.7",
    "@edge-csrf/nextjs": "2.5.3-cloudflare-rc1",
    "@hookform/resolvers": "^4.1.3",
    "@kit/accounts": "workspace:*",
    "@kit/admin": "workspace:*",
    "@kit/analytics": "workspace:*",
    "@kit/auth": "workspace:*",
    "@kit/billing": "workspace:*",
    "@kit/billing-gateway": "workspace:*",
    "@kit/cms": "workspace:*",
    "@kit/database-webhooks": "workspace:*",
    "@kit/email-templates": "workspace:*",
    "@kit/i18n": "workspace:*",
    "@kit/mailers": "workspace:*",
    "@kit/monitoring": "workspace:*",
    "@kit/next": "workspace:*",
    "@kit/notifications": "workspace:*",
    "@kit/shared": "workspace:*",
    "@kit/supabase": "workspace:*",
    "@kit/team-accounts": "workspace:*",
    "@kit/ui": "workspace:*",
    "@makerkit/data-loader-supabase-core": "^0.0.8",
    "@makerkit/data-loader-supabase-nextjs": "^1.2.3",
    "@marsidev/react-turnstile": "^1.1.0",
    "@radix-ui/react-icons": "^1.3.2",
    "@supabase/supabase-js": "2.49.1",
    "@tanstack/react-query": "5.67.1",
    "@tanstack/react-table": "^8.21.2",
    "date-fns": "^4.1.0",
    "lucide-react": "^0.477.0",
    "next": "15.2.1",
    "next-sitemap": "^4.2.3",
    "next-themes": "0.4.4",
    "react": "19.0.0",
    "react-device-detect": "^2.2.3",
    "react-dom": "19.0.0",
    "react-hook-form": "^7.54.2",
    "react-i18next": "^15.4.1",
    "recharts": "2.15.1",
    "tailwind-merge": "^3.0.2",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@kit/eslint-config": "workspace:*",
    "@kit/prettier-config": "workspace:*",
    "@kit/tsconfig": "workspace:*",
    "@next/bundle-analyzer": "15.2.1",
    "@tailwindcss/postcss": "^4.0.9",
    "@types/node": "^22.13.4",
    "@types/react": "19.0.10",
    "@types/react-dom": "19.0.4",
    "autoprefixer": "^10.4.20",
    "babel-plugin-react-compiler": "19.0.0-beta-e1e972c-20250221",
    "dotenv-cli": "^8.0.0",
    "pino-pretty": "^13.0.0",
    "prettier": "^3.5.3",
    "supabase": "^2.15.8",
    "tailwindcss": "4.0.9",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.8.2"
  },
  "prettier": "@kit/prettier-config",
  "browserslist": [
    "last 1 versions",
    "> 0.7%",
    "not dead"
  ]
}

@curvejumpinc nothing specific jumps out.

I installed the same package versions and no issues so far.

Do you have any code snippet, of how you are loading NylasScheduler, I could not reproduce using : import dynamic from 'next/dynamic';

not sure why but the issue arises when running the nextjs dev server with turbopack npm dev --turbopack

The NEXTJS quick start example is using a older version of the import { NylasScheduling } from “@nylas/react”;

And works fine with NEXTJS 15; However as soon as you upgrade to the latest one 2.1 the turbopack errors comes out . . .

@nylas/react - npm → Also state is not compatible with TurboPack, that is not the standard for anyone using NextJS.

Is this something you’re going to insert into the roadmap? As we’re deploying to production in the next couple of days, and we would like to know if is worth the wait, or just using your self-hosted page.

In the latter, would it be possible to use a CNAME?

Is there a possibility to remove the branding, as for the turbopack we’re not able to host this page ourselves?

@albertocubeddu - did you happen to see my response here: Is it possible to remove Nylas Branding from the booking confirmed email? - #7 by ram