TypeError: Cannot perform ArrayBuffer.prototype.slice - Turborepo - Microfrontends

[luiscaceresd]

I'm trying to get workflows to work on my turborepo but it doesn't work I tried adding a simple owrkflow but I always get this error. I use microfrondends and turborepo

This is my matcher in my proxy.ts:

export const config = {
  matcher: [
    '/((?!_next/static|_next/image|images|locales|assets|api/*|.well-known/workflow/).*)',
    {
      source: '/((?!.well-known/workflow/).*)',
    },
  ],
};

and this is what I'm doing export default withWorkflow(withMicrofrontends(withAnalyzer(config))); in my next.config.ts

I'm using version "workflow": "4.0.1-beta.22",

zeik0:dev: [14:28:43.794] INFO: Triggering test workflow
zeik0:dev:     env: "development"
zeik0:dev:     operation: "triggerTestWorkflow"
zeik0:dev:     userId: "31a03e74-1639-45b6-bfa7-77447f1a4762"
zeik0:dev:     accountId: "5deaa894-2094-4da3-b4fd-1fada0809d1c"
zeik0:dev: [14:28:43.961] INFO: Test workflow started successfully
zeik0:dev:     env: "development"
zeik0:dev:     operation: "triggerTestWorkflow"
zeik0:dev:     workflowRunId: "wrun_01KB3969MR7GPG5HGN30JQ769M"
zeik0:dev:     accountId: "5deaa894-2094-4da3-b4fd-1fada0809d1c"
zeik0:dev:  POST /home/zeik0/smart-discounts 200 in 881ms (compile: 140ms, proxy.ts: 189ms, render: 552ms)
zeik0:dev:  │ GET http://127.0.0.1:54321/auth/v1/user 200 in 154ms (cache skip)
zeik0:dev:  │ │ Cache skipped reason: (fetchCache = default-no-store)
zeik0:dev: [embedded world] Queue operation failed: TypeError: fetch failed
zeik0:dev:     at ignore-listed frames {
zeik0:dev:   [cause]: TypeError: Cannot perform ArrayBuffer.prototype.slice on a detached ArrayBuffer
zeik0:dev:       at ArrayBuffer.slice (<anonymous>)
zeik0:dev: }
zeik0:dev: Discovering workflow directives 34887ms
zeik0:dev: Discovering workflow directives 34881ms
zeik0:dev: Created steps bundle 329ms
zeik0:dev: Created steps bundle 337ms
zeik0:dev: Created intermediate workflow bundle 310ms
zeik0:dev: Created intermediate workflow bundle 462ms
zeik0:dev: Discovering workflow directives 28388ms
zeik0:dev: Discovering workflow directives 28910ms
zeik0:dev: Created steps bundle 252ms
zeik0:dev: Created steps bundle 260ms
zeik0:dev: Failed to write debug file: SyntaxError: Unexpected end of JSON input
zeik0:dev:     at JSON.parse (<anonymous>)
zeik0:dev: Created intermediate workflow bundle 204ms
zeik0:dev: Created intermediate workflow bundle 202ms
zeik0:dev: Failed to write debug file: SyntaxError: Unexpected end of JSON input
zeik0:dev:     at JSON.parse (<anonymous>)

[luiscaceresd]

the workflows get created but they are stuck at pending I also changed the port to target my proxy's port for microfrontends

[TooTallNate]

Haven't been able to reproduce so far. Could you share a complete repo that's demonstrating the issue? I am trying to replicate your setup but haven't been able to yet.

[TooTallNate]

Have you tried adding the workflow paths to your microfrontends.jsonc file? Something like:

{
  "$schema": "https://openapi.vercel.sh/microfrontends.json",
  "applications": {
    "my-app": {
      "assetPrefix": "static",
      "development": {
        "local": 3002,
      },
      "packageName": "my-app",
      "routing": [
        {
          "paths": [
            // Workflow hits this route: https://useworkflow.dev/docs/how-it-works/framework-integrations#workflow-endpoint
            "/.well-known/workflow/:path*"
            // … Your other paths for your app
          ],
        },
      ],
    },
  },
  "options": {
    "localProxyPort": 3000,
  },
}

[luiscaceresd]

I added the routing as you suggested but it's still not working. I updated to latest version of workflow 4.0.1-beta.24 but I'm still getting the same error:

zeik0:dev: [15:00:04.750] INFO: Triggering test workflow
zeik0:dev:     env: "development"
zeik0:dev:     operation: "triggerTestWorkflow"
zeik0:dev:     userId: "31a03e74-1639-45b6-bfa7-77447f1a4762"
zeik0:dev:     accountId: "5deaa894-2094-4da3-b4fd-1fada0809d1c"
zeik0:dev: [15:00:04.933] INFO: Test workflow started successfully
zeik0:dev:     env: "development"
zeik0:dev:     operation: "triggerTestWorkflow"
zeik0:dev:     workflowRunId: "wrun_01KBJSC0GPG74BQ0KB23HKDW5R"
zeik0:dev:     accountId: "5deaa894-2094-4da3-b4fd-1fada0809d1c"
zeik0:dev:  POST /home/zeik0/smart-discounts 200 in 1078ms (compile: 325ms, proxy.ts: 257ms, render: 495ms)
zeik0:dev:  │ GET http://127.0.0.1:65421/auth/v1/user 200 in 155ms (cache skip)
zeik0:dev:  │ │ Cache skipped reason: (fetchCache = default-no-store)
zeik0:dev: [local world] Queue operation failed: TypeError: fetch failed
zeik0:dev:     at ignore-listed frames {
zeik0:dev:   [cause]: TypeError: Cannot perform ArrayBuffer.prototype.slice on a detached ArrayBuffer
zeik0:dev:       at ArrayBuffer.slice (<anonymous>)
zeik0:dev: }
chat:dev: Discovering workflow directives 7555ms
chat:dev: Created steps bundle 49ms
chat:dev: Created intermediate workflow bundle 6ms
zeik0:dev: Discovering workflow directives 49224ms
zeik0:dev: Discovering workflow directives 44394ms
zeik0:dev: Created steps bundle 241ms
zeik0:dev: Created steps bundle 242ms
zeik0:dev: Created intermediate workflow bundle 237ms
zeik0:dev: Created intermediate workflow bundle 238ms
zeik0:dev: Creating webhook route
zeik0:dev: Discovering workflow directives 28572ms
zeik0:dev: Discovering workflow directives 28576ms
zeik0:dev: Created steps bundle 238ms
zeik0:dev: Created steps bundle 241ms
zeik0:dev: Created intermediate workflow bundle 216ms
zeik0:dev: Created intermediate workflow bundle 214ms

microfrontends.json -> I cannot add any routing to my main app (zek0) because I would get this error

ra@Kira:~/work/lezgo$ turbo dev
  ╭──────────────────────────────────────────────────────────────────────────╮
  │                                                                          │
  │                     Update available v2.5.8 ≫ v2.6.1                     │
  │    Changelog: https://github.com/vercel/turborepo/releases/tag/v2.6.1    │
  │          Run "pnpm dlx @turbo/codemod@latest update" to update           │
  │                                                                          │
  │          Follow @turborepo for updates: https://x.com/turborepo          │
  ╰──────────────────────────────────────────────────────────────────────────╯
  turbo 2.5.8

  • Packages in scope: @repo/accounts, @repo/admin, @repo/ai, @repo/analytics, @repo/auth, @repo/automations, @repo/
  billing, @repo/billing-gateway, @repo/cms, @repo/cms-types, @repo/contacts, @repo/database-webhooks, @repo/db, @repo/
  email-templates, @repo/eslint-config, @repo/forms, @repo/i18n, @repo/keystatic, @repo/lemon-squeezy, @repo/mailers,
  @repo/mailers-shared, @repo/mcp-server, @repo/monitoring, @repo/monitoring-core, @repo/next, @repo/next-intl, @repo/
  nodemailer, @repo/notifications, @repo/otp, @repo/policies, @repo/prettier-config, @repo/product-selector, @repo/
  reseller-portal, @repo/resend, @repo/sentry, @repo/shared, @repo/shopify-inventory, @repo/smart-discounts, @repo/
  stripe, @repo/supabase, @repo/team-accounts, @repo/tsconfig, @repo/ui, @repo/wordpress, @repo/youtube, billing, chat,
  cms, dev-tool, e2e, features, lezgo-app, mailers, monitoring, prisma-client-
  e504c04f193bb8789330e7327e0de30f42057c3ff5ff498852bc089df0c23d90, scripts, zeik0
  • Running dev in 57 packages
  • Remote caching disabled
  zeik0:dev: cache bypass, force executing 9aa71c737cb0fb3b
  lezgo-app:dev: cache bypass, force executing 2ad517475ed23290
  chat:dev: cache bypass, force executing 85e648b2cf911e0c
  zeik0:proxy: cache bypass, force executing e53e51793949760e
  scripts:dev: cache bypass, force executing 484299842f21da45
  dev-tool:dev: cache bypass, force executing 89608837cf69943b
  zeik0:dev:
  zeik0:dev: > zeik0@0.1.0 dev /home/kira/work/lezgo/apps/web
  zeik0:dev: > pnpm with-env next dev --port $(microfrontends port) | pino-pretty -c
  zeik0:dev:
  lezgo-app:dev:
  lezgo-app:dev: > lezgo-app@0.1.0 dev /home/kira/work/lezgo/apps/lezgo-app
  lezgo-app:dev: > next dev --port 3001
  lezgo-app:dev:
  zeik0:proxy:
  zeik0:proxy: > zeik0@0.1.0 proxy /home/kira/work/lezgo/apps/web
  zeik0:proxy: > microfrontends proxy /home/kira/work/lezgo/apps/web/microfrontends.json --names zeik0 chat
  zeik0:proxy:
  scripts:dev:
  scripts:dev: > scripts@0.1.0 dev /home/kira/work/lezgo/tooling/scripts
  scripts:dev: > node ./src/dev.mjs
  scripts:dev:
  chat:dev:
  chat:dev: > chat@0.1.0 dev /home/kira/work/lezgo/apps/chat
  chat:dev: > pnpm with-env next dev --turbo --port $(microfrontends port) | pino-pretty -c
  chat:dev:
  dev-tool:dev:
  dev-tool:dev: > dev-tool@0.1.0 dev /home/kira/work/lezgo/apps/dev-tool
  dev-tool:dev: > next dev --turbo --port=3010 | pino-pretty -c
  dev-tool:dev:
  scripts:dev: You are running Node 20.13.1.
  zeik0:dev: /home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2870
  zeik0:dev:     throw new Error(`Unable to determine configured port for ${appName}`, {
  zeik0:dev:     ^
  zeik0:dev:
  zeik0:dev: Error: Unable to determine configured port for zeik0
  zeik0:dev:     at mfePort (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2870:11)
  zeik0:dev:     at displayPort (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2893:20)
  zeik0:dev:     at Command.<anonymous> (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2934:5)
  zeik0:dev:     at Command.listener [as _actionHandler] (/home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/
  node_modules/commander/lib/command.js:542:17)
  zeik0:dev:     at /home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/node_modules/commander/lib/
  command.js:1502:14
  zeik0:dev:     at Command._chainOrCall (/home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/node_modules/
  commander/lib/command.js:1386:12)
  zeik0:dev:     at Command._parseCommand (/home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/node_modules/
  commander/lib/command.js:1501:27)
  zeik0:dev:     at /home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/node_modules/commander/lib/
  command.js:1265:27
  zeik0:dev:     at Command._chainOrCall (/home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/node_modules/
  commander/lib/command.js:1386:12)
  zeik0:dev:     at Command._dispatchSubcommand (/home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/node_modules/
  commander/lib/command.js:1261:25) {
  zeik0:dev:   [cause]: MicrofrontendError [MicrofrontendsError]: No default application found. At least one application
  needs to be the default by omitting routing.
  zeik0:dev:       at validateConfigDefaultApplication (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:668:11)
  zeik0:dev:       at MicrofrontendConfigIsomorphic.validate (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:960:5)
  zeik0:dev:       at new MicrofrontendConfigIsomorphic (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:922:35)
  zeik0:dev:       at new MicrofrontendsServer (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:1668:19)
  zeik0:dev:       at MicrofrontendsServer.fromFile (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:1836:14)
  zeik0:dev:       at MicrofrontendsServer.infer (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:1766:37)
  zeik0:dev:       at loadConfig (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2883:39)
  zeik0:dev:       at mfePort (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2862:20)
  zeik0:dev:       at displayPort (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2893:20)
  zeik0:dev:       at Command.<anonymous> (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2934:5) {
  zeik0:dev:     source: '@vercel/microfrontends',
  zeik0:dev:     type: 'config',
  zeik0:dev:     subtype: 'no_default_application',
  zeik0:dev:     [cause]: undefined
  zeik0:dev:   }
  zeik0:dev: }
  zeik0:dev:
  zeik0:dev: Node.js v20.13.1
  zeik0:proxy: /home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:1841
  zeik0:proxy:       throw MicrofrontendError.handle(e, {
  zeik0:proxy:       ^
  zeik0:proxy:
  zeik0:proxy: MicrofrontendError [MicrofrontendsError]: No default application found. At least one application needs to
  be the default by omitting routing.
  zeik0:proxy:     at validateConfigDefaultApplication (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:668:11)
  zeik0:proxy:     at MicrofrontendConfigIsomorphic.validate (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:960:5)
  zeik0:proxy:     at new MicrofrontendConfigIsomorphic (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:922:35)
  zeik0:proxy:     at new MicrofrontendsServer (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:1668:19)
  zeik0:proxy:     at MicrofrontendsServer.fromFile (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:1836:14)
  zeik0:proxy:     at LocalProxy.fromFile (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2557:45)
  zeik0:proxy:     at Command.<anonymous> (/home/kira/work/lezgo/node_modules/.pnpm/
  @vercel+microfrontends@2.2.0_@vercel+analytics@1.5.0_next@16.0.0_@babel+core@7.28.5_@op_3f5376f8b97562a071d3258fc346de0
  6/node_modules/@vercel/microfrontends/dist/bin/cli.cjs:2927:35)
  zeik0:proxy:     at Command.listener [as _actionHandler] (/home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/
  node_modules/commander/lib/command.js:542:17)
  zeik0:proxy:     at /home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/node_modules/commander/lib/
  command.js:1502:14
  zeik0:proxy:     at Command._chainOrCall (/home/kira/work/lezgo/node_modules/.pnpm/commander@12.1.0/node_modules/
  commander/lib/command.js:1386:12) {
  zeik0:proxy:   source: '@vercel/microfrontends',
  zeik0:proxy:   type: 'config',
  zeik0:proxy:   subtype: 'no_default_application',
  zeik0:proxy:   [cause]: undefined
  zeik0:proxy: }
  zeik0:proxy:
  zeik0:proxy: Node.js v20.13.1
  zeik0:proxy:  ELIFECYCLE  Command failed with exit code 1.
  zeik0:proxy: ERROR: command finished with error: command (/home/kira/work/lezgo/apps/web) /home/kira/.nvm/versions/
  node/v20.13.1/bin/pnpm run proxy /home/kira/work/lezgo/apps/web/microfrontends.json --names zeik0 chat exited (1)
  dev-tool:dev: [baseline-browser-mapping] The data in this module is over two months old.  To ensure accurate Baseline
  data, please update: `npm i baseline-browser-mapping@latest -D`
  lezgo-app:dev: [baseline-browser-mapping] The data in this module is over two months old.  To ensure accurate Baseline
  data, please update: `npm i baseline-browser-mapping@latest -D`
  dev-tool:dev:
  lezgo-app:dev:
  zeik0#proxy: command (/home/kira/work/lezgo/apps/web) /home/kira/.nvm/versions/node/v20.13.1/bin/pnpm run proxy /home/
  kira/work/lezgo/apps/web/microfrontends.json --names zeik0 chat exited (1)

   Tasks:    0 successful, 6 total
  Cached:    0 cached, 6 total
    Time:    3.223s
  Failed:    zeik0#proxy

   ERROR  run failed: command  exited (1)

{
  "$schema": "https://openapi.vercel.sh/microfrontends.json",
  "applications": {
    "zeik0": {
      "development": {
        "fallback": "https://www.zeik0.com"
      }
    },
    "chat": {
      "routing": [
        {
          "group": "chat",
          "paths": [
            "/chat",
            "/chat/:path*"
          ]
        },
        {
          "group": "chat-api",
          "paths": [
            "/api/history/:path*",
            "/api/chat/:path*",
            "/api/document/:path*",
            "/api/files/:path*",
            "/api/suggestions/:path*",
            "/api/vote/:path*"
          ]
        },
        {
          "group": "workflow",
          "paths": [
            "/.well-known/workflow/:path*"
          ]
        }
      ]
    }
  }
}

proxy.ts

import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

import { CsrfError, createCsrfProtect } from '@edge-csrf/nextjs';

import { isSuperAdmin } from '@repo/admin';
import { checkRequiresMultiFactorAuthentication } from '@repo/supabase/check-requires-mfa';
import { createMiddlewareClient } from '@repo/supabase/middleware-client';

import appConfig from '~/config/app.config';
import pathsConfig from '~/config/paths.config';

const CSRF_SECRET_COOKIE = 'csrfSecret';
const NEXT_ACTION_HEADER = 'next-action';

export const config = {
  matcher: ['/((?!_next/static|_next/image|images|locales|assets|api/*|.well-known/workflow/).*)'],
};

const getUser = (request: NextRequest, response: NextResponse) => {
  const supabase = createMiddlewareClient(request, response);

  return supabase.auth.getClaims();
};

const createTeamCookie = (userId: string) => `${userId}-selected-team-slug`;
function handleTeamAccountsOnly(request: NextRequest, userId: string) {
  // always allow access to the teams page
  if (request.nextUrl.pathname === '/home/teams') {
    return NextResponse.next();
  }
  if (request.nextUrl.pathname === '/home') {
    return redirectToTeam(request, userId);
  }
  if (isTeamAccountRoute(request) && !isUserRoute(request)) {
    return storeTeamSlug(request, userId);
  }
  if (isUserRoute(request)) {
    return redirectToTeam(request, userId);
  }
  return NextResponse.next();
}
function isUserRoute(request: NextRequest) {
  const pathName = request.nextUrl.pathname;
  return ['settings', 'billing', 'members'].includes(pathName.split('/')[2]!);
}
function isTeamAccountRoute(request: NextRequest) {
  const pathName = request.nextUrl.pathname;
  return pathName.startsWith('/home/');
}
function storeTeamSlug(request: NextRequest, userId: string): NextResponse {
  const accountSlug = request.nextUrl.pathname.split('/')[2];
  if (!accountSlug) {
    return NextResponse.next();
  }
  const cookieName = createTeamCookie(userId);
  const existing = request.cookies.get(cookieName);
  if (existing?.value === accountSlug) {
    return NextResponse.next();
  }
  const response = NextResponse.next();
  response.cookies.set({
    name: createTeamCookie(userId),
    value: accountSlug,
    path: '/',
  });
  return response;
}
function redirectToTeam(request: NextRequest, userId: string): NextResponse {
  const cookieName = createTeamCookie(userId);
  const lastTeamSlug = request.cookies.get(cookieName);
  if (lastTeamSlug) {
    return NextResponse.redirect(
      new URL(`/home/${lastTeamSlug.value}`, request.url),
    );
  }
  return NextResponse.redirect(new URL('/home/teams', request.url));
}

export async function proxy(request: NextRequest) {
  const secureHeaders = await createResponseWithSecureHeaders();
  const response = NextResponse.next(secureHeaders);

  // set a unique request ID for each request
  // this helps us log and trace requests
  setRequestId(request);

  // apply CSRF protection for mutating requests
  const csrfResponse = await withCsrfMiddleware(request, response);

  // handle patterns for specific routes
  const handlePattern = await matchUrlPattern(request.url);

  // if a pattern handler exists, call it
  if (handlePattern) {
    const patternHandlerResponse = await handlePattern(request, csrfResponse);

    // if a pattern handler returns a response, return it
    if (patternHandlerResponse) {
      return patternHandlerResponse;
    }
  }

  // append the action path to the request headers
  // which is useful for knowing the action path in server actions
  if (isServerAction(request)) {
    csrfResponse.headers.set('x-action-path', request.nextUrl.pathname);
  }

  // if no pattern handler returned a response,
  // return the session response
  return csrfResponse;
}

async function withCsrfMiddleware(
  request: NextRequest,
  response: NextResponse,
) {
  if (shouldSkipCsrf(request)) {
    return response;
  }

  // set up CSRF protection
  const csrfProtect = createCsrfProtect({
    cookie: {
      secure: appConfig.production,
      name: CSRF_SECRET_COOKIE,
    },
    // ignore CSRF errors for server actions since protection is built-in
    ignoreMethods: isServerAction(request)
      ? ['POST']
      : // always ignore GET, HEAD, and OPTIONS requests
      ['GET', 'HEAD', 'OPTIONS'],
  });

  try {
    await csrfProtect(request, response);

    return response;
  } catch (error) {
    // if there is a CSRF error, return a 403 response
    if (error instanceof CsrfError) {
      return NextResponse.json('Invalid CSRF token', {
        status: 401,
      });
    }

    throw error;
  }
}

function shouldSkipCsrf(request: NextRequest): boolean {
  const pathname = request.nextUrl.pathname;
  if (pathname.startsWith('/api/integrations/n8n/')) {
    return true;
  }

  return false;
}

function isServerAction(request: NextRequest) {
  const headers = new Headers(request.headers);

  return headers.has(NEXT_ACTION_HEADER);
}

async function adminMiddleware(request: NextRequest, response: NextResponse) {
  const isAdminPath = request.nextUrl.pathname.startsWith('/admin');

  if (!isAdminPath) {
    return;
  }

  const { data, error } = await getUser(request, response);

  // If user is not logged in, redirect to sign in page.
  // This should never happen, but just in case.
  if (!data?.claims || error) {
    return NextResponse.redirect(
      new URL(pathsConfig.auth.signIn, request.nextUrl.origin).href,
    );
  }

  const client = createMiddlewareClient(request, response);
  const userIsSuperAdmin = await isSuperAdmin(client);

  // If user is not an admin, redirect to 404 page.
  if (!userIsSuperAdmin) {
    return NextResponse.redirect(new URL('/404', request.nextUrl.origin).href);
  }

  // in all other cases, return the response
  return response;
}

/**
 * Define URL patterns and their corresponding handlers.
 */
async function getPatterns() {
  let URLPattern = globalThis.URLPattern;

  if (!URLPattern) {
    const { URLPattern: polyfill } = await import('urlpattern-polyfill');
    URLPattern = polyfill as typeof URLPattern;
  }

  return [
    {
      pattern: new URLPattern({ pathname: '/admin/*?' }),
      handler: adminMiddleware,
    },
    {
      pattern: new URLPattern({ pathname: '/auth/*?' }),
      handler: async (req: NextRequest, res: NextResponse) => {
        const { data } = await getUser(req, res);

        // the user is logged out, so we don't need to do anything
        if (!data?.claims) {
          return;
        }

        // check if we need to verify MFA (user is authenticated but needs to verify MFA)
        const isVerifyMfa = req.nextUrl.pathname === pathsConfig.auth.verifyMfa;

        // If user is logged in and does not need to verify MFA,
        // redirect to home page.
        if (!isVerifyMfa) {
          const nextPath =
            req.nextUrl.searchParams.get('next') ?? pathsConfig.app.home;

          return NextResponse.redirect(
            new URL(nextPath, req.nextUrl.origin).href,
          );
        }
      },
    },
    {
      pattern: new URLPattern({ pathname: '/home/*?' }),
      handler: async (req: NextRequest, res: NextResponse) => {
        const { data } = await getUser(req, res);
        const origin = req.nextUrl.origin;
        const next = req.nextUrl.pathname;
        // If user is not logged in, redirect to sign in page.
        if (!data?.claims) {
          const signIn = pathsConfig.auth.signIn;
          const redirectPath = `${signIn}?next=${next}`;
          return NextResponse.redirect(new URL(redirectPath, origin).href);
        }
        const supabase = createMiddlewareClient(req, res);
        const requiresMultiFactorAuthentication =
          await checkRequiresMultiFactorAuthentication(supabase);
        // If user requires multi-factor authentication, redirect to MFA page.
        if (requiresMultiFactorAuthentication) {
          return NextResponse.redirect(
            new URL(pathsConfig.auth.verifyMfa, origin).href,
          );
        }
        const userId = data.claims.sub;
        return handleTeamAccountsOnly(req, userId);
      },
    },
  ];
}

/**
 * Match URL patterns to specific handlers.
 * @param url
 */
async function matchUrlPattern(url: string) {
  const patterns = await getPatterns();
  const input = url.split('?')[0];

  for (const pattern of patterns) {
    const patternResult = pattern.pattern.exec(input);

    if (patternResult !== null && 'pathname' in patternResult) {
      return pattern.handler;
    }
  }
}

/**
 * Set a unique request ID for each request.
 * @param request
 */
function setRequestId(request: Request) {
  request.headers.set('x-correlation-id', crypto.randomUUID());
}

/**
 * @name createResponseWithSecureHeaders
 * @description Create a middleware with enhanced headers applied (if applied).
 * This is disabled by default. To enable set ENABLE_STRICT_CSP=true
 */
async function createResponseWithSecureHeaders() {
  const enableStrictCsp = process.env.ENABLE_STRICT_CSP ?? 'false';

  // we disable ENABLE_STRICT_CSP by default
  if (enableStrictCsp === 'false') {
    return {};
  }

  const { createCspResponse } = await import('./lib/create-csp-response');

  return createCspResponse();
}

next.config.ts

import type { NextConfig } from 'next';
import withBundleAnalyzer from '@next/bundle-analyzer';
import { withMicrofrontends } from '@vercel/microfrontends/next/config';
import { withWorkflow } from 'workflow/next';

const IS_PRODUCTION = process.env.NODE_ENV === 'production';
const DISABLE_IMAGE_OPTIMIZATION =
  !IS_PRODUCTION && process.env.NEXT_IMAGE_DEV_UNOPTIMIZED !== 'false';
const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
const ENABLE_REACT_COMPILER = process.env.ENABLE_REACT_COMPILER === 'true';
// CHAT_APP_URL no longer needed - now handled by microfrontends
const PRODUCTION_DOMAIN = (
  process.env.NEXT_PUBLIC_SITE_URL || 'www.zeik0.com'
).replace('www.', '');
const CHAT_DOMAIN = process.env.CHAT_DOMAIN || 'bric-chat.vercel.app';

const INTERNAL_PACKAGES = [
  '@repo/ui',
  '@repo/auth',
  '@repo/accounts',
  '@repo/admin',
  '@repo/team-accounts',
  '@repo/shared',
  '@repo/supabase',
  '@repo/i18n',
  '@repo/mailers',
  '@repo/billing-gateway',
  '@repo/email-templates',
  '@repo/database-webhooks',
  '@repo/cms',
  '@repo/monitoring',
  '@repo/next',
  '@repo/notifications',
  '@repo/smart-discounts',
];

const config: NextConfig = {
  reactStrictMode: true,
  /** Enables hot reloading for local packages without a build step */
  transpilePackages: INTERNAL_PACKAGES,
  images: getImagesConfig(),
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  serverExternalPackages: [
    'ai',
    '@ai-sdk/openai',
    '@ai-sdk/google',
    '@ai-sdk/react',
    '@ai-sdk/deepseek',
    '@ai-sdk/fireworks',
  ],
  outputFileTracingIncludes: {
    '/*': ['./content/**/*'],
  },
  redirects: getRedirects,
  turbopack: {
    resolveExtensions: ['.ts', '.tsx', '.js', '.jsx'],
    resolveAlias: getModulesAliases(),
  },
  devIndicators:
    process.env.NEXT_PUBLIC_CI === 'true'
      ? false
      : {
        position: 'bottom-right',
      },
  reactCompiler: ENABLE_REACT_COMPILER,
  experimental: {
    mdxRs: true,
    turbopackFileSystemCacheForDev: true,
    optimizePackageImports: [
      'recharts',
      'lucide-react',
      '@radix-ui/react-icons',
      '@radix-ui/react-avatar',
      '@radix-ui/react-select',
      'date-fns',
      ...INTERNAL_PACKAGES,
    ],
    // Enhanced server actions configuration
    serverActions: {
      allowedOrigins: [
        // Extract domain from production URL without protocol
        PRODUCTION_DOMAIN,
        CHAT_DOMAIN,
        `*.${PRODUCTION_DOMAIN}`,
        `*.${CHAT_DOMAIN}`,
        // Include localhost for development
        ...(IS_PRODUCTION
          ? []
          : ['localhost:3000', 'localhost:3001', 'localhost:3002']),
      ],
      bodySizeLimit: '2mb',
    },
  },
  modularizeImports: {
    lodash: {
      transform: 'lodash/{{member}}',
    },
  },
  /** We already do linting and typechecking as separate tasks in CI */
  typescript: { ignoreBuildErrors: true },
  // Compiler optimizations
  compiler: {
    removeConsole: IS_PRODUCTION ? { exclude: ['error', 'warn'] } : false,
    reactRemoveProperties: IS_PRODUCTION,
  },
  // Headers for performance and security
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-DNS-Prefetch-Control',
            value: 'on',
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin',
          },
        ],
      },
      // Static asset caching
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/_next/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      // API route caching
      {
        source: '/api/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value:
              'public, max-age=60, s-maxage=300, stale-while-revalidate=86400',
          },
        ],
      },
      // Font optimization
      {
        source: '/fonts/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
          {
            key: 'Access-Control-Allow-Origin',
            value: '*',
          },
        ],
      },
    ];
  },
};

const withAnalyzer = withBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
});

export default withWorkflow(withMicrofrontends(withAnalyzer(config)));

function getImagesConfig(): NextConfig['images'] {
  const remotePatterns = [];

  if (SUPABASE_URL) {
    const hostname = new URL(SUPABASE_URL).hostname;

    remotePatterns.push({
      protocol: 'https',
      hostname,
    });
  }

  // Add Shopify CDN for product images
  remotePatterns.push({
    protocol: 'https',
    hostname: 'cdn.shopify.com',
  });

  // Placeholder images for mock generation flows
  remotePatterns.push({
    protocol: 'https',
    hostname: 'placehold.co',
  });

  if (IS_PRODUCTION) {
    return {
      remotePatterns,
    };
  }

  // Development-only domains
  remotePatterns.push(
    ...[
      {
        protocol: 'http',
        hostname: '127.0.0.1',
      },
      {
        protocol: 'http',
        hostname: 'localhost',
      },
      {
        hostname: 'avatar.vercel.sh',
      },
      {
        protocol: 'https',
        hostname: '*.vercel-storage.com',
      },
      {
        protocol: 'https',
        hostname: 'hebbkx1anhila5yf.public.blob.vercel-storage.com',
      },
    ],
  );

  return {
    remotePatterns,
    ...(DISABLE_IMAGE_OPTIMIZATION
      ? {
        unoptimized: true, // Disable optimization in development to fix local IP issues
      }
      : {}),
  };
}

async function getRedirects() {
  return [
    {
      source: '/server-sitemap.xml',
      destination: '/sitemap.xml',
      permanent: true,
    },
  ];
}

/**
 * @description Aliases modules based on the environment variables
 * This will speed up the development server by not loading the modules that are not needed
 */
function getModulesAliases(): Record<string, string> {
  if (process.env.NODE_ENV !== 'development') {
    return {};
  }

  const monitoringProvider = process.env.NEXT_PUBLIC_MONITORING_PROVIDER;
  const billingProvider = process.env.NEXT_PUBLIC_BILLING_PROVIDER;
  const mailerProvider = process.env.MAILER_PROVIDER;
  const captchaProvider = process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY;

  // exclude the modules that are not needed
  const excludeSentry = monitoringProvider !== 'sentry';
  const excludeStripe = billingProvider !== 'stripe';
  const excludeNodemailer = mailerProvider !== 'nodemailer';
  const excludeTurnstile = !captchaProvider;

  /** @type {Record<string, string>} */
  const aliases = {};

  // the path to the noop module
  const noopPath = '~/lib/dev-mock-modules';

  if (excludeSentry) {
    aliases['@sentry/nextjs'] = noopPath;
  }

  if (excludeStripe) {
    aliases['stripe'] = noopPath;
    aliases['@stripe/stripe-js'] = noopPath;
  }

  if (excludeNodemailer) {
    aliases['nodemailer'] = noopPath;
  }

  if (excludeTurnstile) {
    aliases['@marsidev/react-turnstile'] = noopPath;
  }

  return aliases;
}

[luiscaceresd]

I invited u to my repo