Vercel with Next.js edge deployment quick fix

Question

I have Vercel project I'm trying to deploy. I'm using Next.js. Here is is my next.config.js file:

/* eslint-disable */

/** @type {import('next').NextConfig} */
const nextConfig = {
    async headers() {
        return [
            {
                source: "/api/:path*",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    { key: "Access-Control-Allow-Origin", value: "*" },
                    {
                        key: "Access-Control-Allow-Methods",
                        value: "GET,DELETE,PATCH,POST,PUT,OPTIONS",
                    },
                    {
                        key: "Access-Control-Allow-Headers",
                        value:
                            "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Authorization, id, filters",
                    },
                ],
            },
        ];
    },
    eslint: {
        ignoreDuringBuilds: true,
    },
    typescript: {
        ignoreBuildErrors: true,
    },
    unstable_allowDynamic: [
        '/node_modules/**',
      ],
};
module.exports = nextConfig;

Here is my deployment logs:

[15:45:51.865] Running build in Washington, D.C., USA (East) – iad1
[15:45:51.948] Cloning github.com/eTech-Source/commerce-karma-prod (Branch: main, Commit: 6a51ce8)
[15:45:52.788] Cloning completed: 839.84ms
[15:45:56.810] Restored build cache
[15:45:56.891] Running "vercel build"
[15:45:57.519] Vercel CLI 32.7.1
[15:45:57.979] Installing dependencies...
[15:45:59.433] 
[15:45:59.433] up to date in 926ms
[15:45:59.434] 
[15:45:59.435] 137 packages are looking for funding
[15:45:59.435]   run `npm fund` for details
[15:45:59.445] Detected Next.js version: 14.0.4
[15:45:59.448] Detected `package-lock.json` generated by npm 7+
[15:45:59.449] Running "npm run build"
[15:46:00.289] 
[15:46:00.289] > commerce-karma@dev_0.2.0 build
[15:46:00.290] > next build
[15:46:00.290] 
[15:46:00.859]  ⚠ Invalid next.config.js options detected: 
[15:46:00.860]  ⚠     Unrecognized key(s) in object: 'unstable_allowDynamic'
[15:46:00.861]  ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
[15:46:00.971]    ▲ Next.js 14.0.4
[15:46:00.971]    - Environments: .env.local
[15:46:00.972] 
[15:46:00.972]    Creating an optimized production build ...
[15:46:06.399]  ✓ Compiled successfully
[15:46:06.400]    Skipping validation of types
[15:46:06.401]    Skipping linting
[15:46:06.714]    Collecting page data ...
[15:46:08.576]    Generating static pages (0/23) ...
[15:46:08.837] 
   Generating static pages (5/23) 
[15:46:08.949] 
   Generating static pages (11/23) 
[15:46:09.493] 
   Generating static pages (17/23) 
[15:46:09.935] 
 ✓ Generating static pages (23/23) 
[15:46:10.109]    Finalizing page optimization ...
[15:46:10.110]    Collecting build traces ...
[15:46:18.282] 
[15:46:18.389] Route (app)                              Size     First Load JS
[15:46:18.390] ┌ λ /                                    213 B          97.8 kB
[15:46:18.390] ├ λ /_not-found                          875 B          83.1 kB
[15:46:18.390] ├ λ /api/bio                             0 B                0 B
[15:46:18.390] ├ λ /api/business                        0 B                0 B
[15:46:18.390] ├ λ /api/currentUser                     0 B                0 B
[15:46:18.390] ├ λ /api/location                        0 B                0 B
[15:46:18.390] ├ λ /api/reviews/add                     0 B                0 B
[15:46:18.391] ├ λ /api/reviews/comment                 0 B                0 B
[15:46:18.391] ├ λ /api/reviews/react                   0 B                0 B
[15:46:18.391] ├ ○ /api/test                            0 B                0 B
[15:46:18.391] ├ λ /api/user                            0 B                0 B
[15:46:18.391] ├ λ /api/webhooks/user                   0 B                0 B
[15:46:18.391] ├ λ /app                                 151 B           130 kB
[15:46:18.391] ├ λ /app/afterThirdPartySignIn           137 B          82.3 kB
[15:46:18.391] ├ λ /app/business                        3.62 kB         130 kB
[15:46:18.391] ├ λ /app/customer                        151 B           130 kB
[15:46:18.391] ├ λ /app/live                            179 B          82.4 kB
[15:46:18.391] ├ λ /app/reviews/[slug]/[id]             5.54 kB         132 kB
[15:46:18.392] ├ λ /app/settings                        1.46 kB        88.6 kB
[15:46:18.392] ├ λ /contact                             1.37 kB        83.6 kB
[15:46:18.392] ├ λ /pricing                             285 B          97.9 kB
[15:46:18.392] └ λ /sign-in/[[...sign-in]]              617 B            95 kB
[15:46:18.392] + First Load JS shared by all            82.2 kB
[15:46:18.392]   ├ chunks/938-aa7cae7c7d670e74.js       26.7 kB
[15:46:18.392]   ├ chunks/fd9d1056-900860ef98d0b934.js  53.3 kB
[15:46:18.392]   ├ chunks/main-app-01dcb8892b176af1.js  220 B
[15:46:18.392]   └ chunks/webpack-9dece1407892bb3e.js   2.02 kB
[15:46:18.392] 
[15:46:18.393] 
[15:46:18.393] ƒ Middleware                             202 kB
[15:46:18.393] 
[15:46:18.393] ○  (Static)   prerendered as static content
[15:46:18.393] λ  (Dynamic)  server-rendered on demand using Node.js
[15:46:18.393] 
[15:46:18.532] Traced Next.js server files in: 58.975ms
[15:46:22.408] Created all serverless functions in: 3.876s
[15:46:22.541] Collected static files (public/, static/, .next/static): 7.373ms
[15:46:23.037] Build Completed in /vercel/output [25s]
[15:46:23.270] Deploying outputs...
[15:46:29.953] 
[15:46:30.841] Deployment completed
[15:46:36.968] Uploading build cache [105.53 MB]...
[15:46:40.169] Build cache uploaded: 3.201s

No errors. But on the client I'm getting an error:

This issue seems to be from node_modules. What's a quick fix I can implement to fix this without having to choose different npm packages.

Answer 1

Your issues is to have declared unstable_allowDynamic in the wrong location. You should declare it in the middleware (https://nextjs.org/docs/app/api-reference/file-conventions/middleware)

The error present in your logs:

[15:46:00.860]  ⚠     Unrecognized key(s) in object: 'unstable_allowDynamic'

What you should do is remove it, and add declare in the middleware e.g. src/middleware.ts file:

export const config = {
  runtime: 'edge',
  unstable_allowDynamic: [
    // example of blog
    '/node_modules/foobar/**',
  ],
}

To learn more visit https://nextjs.org/docs/app/api-reference/edge#unsupported-apis