next-runtime icon indicating copy to clipboard operation
next-runtime copied to clipboard
verified publisher icon netlify

[Bug]: Dynamic Segments in Next 13 on edge functions cause Error

Open philschonholzer opened this issue 3 years ago • 2 comments

Summary

Pages in Dynamic Segments throw an error in Next 13 on edge functions:

TypeError: Cannot read properties of undefined (reading 'id')
    at ee (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:6434)
    at et (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:6797)
    at et (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:6885)
    at et (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:6885)
    at ee (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:13349)
    at e (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:17139)
    at p (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:17270)
    at W (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:17429)
    at z.renderHTML (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:6980)
    at Z (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:352:103236)
11:01:45 AM: TypeError: Cannot read properties of null (reading 'default')
    at Object.loadComponent (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:10707)
    at z.findPageComponents (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:7941)
    at z.renderErrorToResponse (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:499)
    at async z.renderToResponse (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:352:107376)
    at async z.pipe (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:352:98454)
    at async Object.fn (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:6313)
    at async x.execute (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:352:83616)
    at async z.run (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:352:98127)

Steps to reproduce

  1. Go to https://verdant-daifuku-4003e5.netlify.app/users
  2. Click on any name

A link to a reproduction repository

https://github.com/philschonholzer/next-test/blob/master/app/users/%5Bid%5D/page.tsx

Next Runtime version

v4.29.3-appdir.0

More information about your build

  • [ ] I am building using the CLI
  • [X] I am building using file-based configuration (netlify.toml)

What OS are you using?

None

Your netlify.toml file

`netlify.toml` 
[build]
command = "next build"
base = "."
publish = ".next"

[build.environment]
NEXT_USE_NETLIFY_EDGE = "true"

[[plugins]]
package = "@netlify/plugin-nextjs"

Your public/_redirects file

`_redirects` 
# Paste content of your `_redirects` file here

Your next.config.js file

`next.config.js` 
/* * @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
    runtime: 'experimental-edge',
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'reqres.in',
        port: '',
        pathname: '/img/faces/**',
      },
    ],
  },
}

module.exports = nextConfig

Builds logs (or link to your logs)

Build logs 
[# Logs](https://app.netlify.com/sites/verdant-daifuku-4003e5/deploys/638b1e7d88d55100085cb694)

Function logs

Function logs 
11:17:02 AM: TypeError: Cannot read properties of undefined (reading 'id')
    at ee (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:6434)
    at et (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:6797)
    at et (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:6885)
    at et (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:6885)
    at eu (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:12399)
    at ee (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:12646)
    at e (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:17139)
    at p (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:17270)
    at W (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:365:17429)
    at z.renderHTML (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:6980)
11:17:02 AM: TypeError: Cannot read properties of null (reading 'default')
    at Object.loadComponent (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:10707)
    at z.findPageComponents (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:7941)
    at z.renderErrorToResponse (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:499)
    at async z.renderToResponse (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:352:107376)
    at async z.pipe (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:352:98454)
    at async Object.fn (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:353:6313)
    at async x.execute (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:352:83616)
    at async z.run (file:///root/.netlify/edge-functions/next_app_users__id__page/bundle.js:352:98127)

.next JSON files

.next JSON files 
// .netlify/internal/edge-functions/manifest.json

{
  "bundles": [
    {
      "asset": "01817df1ed4b6bb1c314ebaf9e16fd88f6bd0b2a836c286a2f3242f3aafda103.eszip",
      "format": "eszip2"
    }
  ],
  "routes": [
    {
      "function": "ipx",
      "name": "next/image handler",
      "pattern": "^/_next/image.*/?$"
    }
  ],
  "post_cache_routes": [
    {
      "function": "next_app_about_page",
      "name": "app/about/page",
      "pattern": "^/about/page$"
    },
    {
      "function": "next_app_about_page",
      "name": "app/about/page",
      "pattern": "^/about(?:/)?$"
    },
    {
      "function": "next_app_users__id__page",
      "name": "app/users/[id]/page",
      "pattern": "^/users/(?<id>[^/]+?)/page$"
    },
    {
      "function": "next_app_users__id__page",
      "name": "app/users/[id]/page",
      "pattern": "^/users/([^/]+?)(?:/)?$"
    },
    {
      "function": "next_app_users_page",
      "name": "app/users/page",
      "pattern": "^/users/page$"
    },
    {
      "function": "next_app_users_page",
      "name": "app/users/page",
      "pattern": "^/users(?:/)?$"
    },
    { "function": "next_app_page", "name": "app/page", "pattern": "^/page$" },
    { "function": "next_app_page", "name": "app/page", "pattern": "^/(?:/)?$" },
    {
      "function": "next_pages_api_runtime",
      "name": "pages/api/runtime",
      "pattern": "^/api/runtime$"
    }
  ],
  "bundler_version": "4.4.3",
  "layers": []
}



// required-server-files.json

{
  "version": 1,
  "config": {
    "env": {},
    "webpack": null,
    "webpackDevMiddleware": null,
    "eslint": { "ignoreDuringBuilds": false },
    "typescript": {
      "ignoreBuildErrors": false,
      "tsconfigPath": "tsconfig.json"
    },
    "distDir": ".next",
    "cleanDistDir": true,
    "assetPrefix": "",
    "configOrigin": "next.config.js",
    "useFileSystemPublicRoutes": true,
    "generateEtags": true,
    "pageExtensions": ["tsx", "ts", "jsx", "js"],
    "target": "server",
    "poweredByHeader": true,
    "compress": true,
    "analyticsId": "",
    "images": {
      "deviceSizes": [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
      "imageSizes": [16, 32, 48, 64, 96, 128, 256, 384],
      "path": "/_next/image",
      "loader": "default",
      "loaderFile": "",
      "domains": [],
      "disableStaticImages": false,
      "minimumCacheTTL": 60,
      "formats": ["image/webp"],
      "dangerouslyAllowSVG": false,
      "contentSecurityPolicy": "script-src 'none'; frame-src 'none'; sandbox;",
      "remotePatterns": [
        {
          "protocol": "https",
          "hostname": "reqres.in",
          "port": "",
          "pathname": "/img/faces/**"
        }
      ],
      "unoptimized": false
    },
    "devIndicators": {
      "buildActivity": true,
      "buildActivityPosition": "bottom-right"
    },
    "onDemandEntries": { "maxInactiveAge": 15000, "pagesBufferLength": 2 },
    "amp": { "canonicalBase": "" },
    "basePath": "",
    "sassOptions": {},
    "trailingSlash": false,
    "i18n": null,
    "productionBrowserSourceMaps": false,
    "optimizeFonts": true,
    "excludeDefaultMomentLocales": true,
    "serverRuntimeConfig": {},
    "publicRuntimeConfig": {},
    "reactStrictMode": true,
    "httpAgentOptions": { "keepAlive": true },
    "outputFileTracing": true,
    "staticPageGenerationTimeout": 60,
    "swcMinify": true,
    "experimental": {
      "middlewarePrefetch": "flexible",
      "optimisticClientCache": true,
      "runtime": "experimental-edge",
      "manualClientBasePath": false,
      "legacyBrowsers": false,
      "newNextLinkBehavior": true,
      "cpus": 31,
      "sharedPool": true,
      "profiling": false,
      "isrFlushToDisk": true,
      "workerThreads": false,
      "pageEnv": false,
      "optimizeCss": false,
      "nextScriptWorkers": false,
      "scrollRestoration": false,
      "externalDir": false,
      "disableOptimizedLoading": false,
      "gzipSize": true,
      "swcFileReading": true,
      "craCompat": false,
      "esmExternals": true,
      "appDir": true,
      "isrMemoryCacheSize": 52428800,
      "fullySpecified": false,
      "outputFileTracingRoot": "",
      "swcTraceProfiling": false,
      "forceSwcTransforms": false,
      "largePageDataBytes": 128000,
      "enableUndici": true,
      "adjustFontFallbacks": false,
      "adjustFontFallbacksWithSizeAdjust": false,
      "trustHostHeader": false
    },
    "configFileName": "next.config.js"
  },
  "appDir": "/opt/build/repo",
  "files": [
    ".next/routes-manifest.json",
    ".next/server/pages-manifest.json",
    ".next/build-manifest.json",
    ".next/prerender-manifest.json",
    ".next/server/middleware-manifest.json",
    ".next/server/flight-manifest.js",
    ".next/server/flight-manifest.json",
    ".next/server/flight-server-css-manifest.js",
    ".next/server/flight-server-css-manifest.json",
    ".next/react-loadable-manifest.json",
    ".next/server/font-manifest.json",
    ".next/BUILD_ID",
    ".next/server/app-paths-manifest.json"
  ],
  "ignore": [
    "node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/@ampproject/toolbox-optimizer/**/*"
  ]
}

// routes-manifest.json

{
  "version": 3,
  "pages404": true,
  "basePath": "",
  "redirects": [
    {
      "source": "/:path+/",
      "destination": "/:path+",
      "internal": true,
      "statusCode": 308,
      "regex": "^(?:/((?:[^/]+?)(?:/(?:[^/]+?))*))/$"
    }
  ],
  "headers": [],
  "dynamicRoutes": [
    {
      "page": "/users/[id]",
      "regex": "^/users/([^/]+?)(?:/)?$",
      "routeKeys": { "id": "id" },
      "namedRegex": "^/users/(?<id>[^/]+?)(?:/)?$"
    }
  ],
  "staticRoutes": [
    {
      "page": "/",
      "regex": "^/(?:/)?$",
      "routeKeys": {},
      "namedRegex": "^/(?:/)?$"
    },
    {
      "page": "/about",
      "regex": "^/about(?:/)?$",
      "routeKeys": {},
      "namedRegex": "^/about(?:/)?$"
    },
    {
      "page": "/users",
      "regex": "^/users(?:/)?$",
      "routeKeys": {},
      "namedRegex": "^/users(?:/)?$"
    }
  ],
  "dataRoutes": [],
  "rsc": {
    "header": "RSC",
    "varyHeader": "RSC, Next-Router-State-Tree, Next-Router-Prefetch"
  },
  "rewrites": []
}

// prerender-manifest.json

{
  "version": 3,
  "routes": {},
  "dynamicRoutes": {},
  "notFoundRoutes": [],
  "preview": {
    "previewModeId": "8bed22d1ad46d31d047479939ed4e0f0",
    "previewModeSigningKey": "ecd426e2cbe693be4b9f65dd6fb539d4d32fc598ea7e4d03cbcb8733178d52b2",
    "previewModeEncryptionKey": "dcab201797efb370f079ebe8dd5ed43b867d4bbc53ea73db4bb10be2c0ae0d52"
  }
}

// app-path-routes-manifest.json

{
  "/about/page": "/about",
  "/users/[id]/page": "/users/[id]",
  "/users/page": "/users",
  "/page": "/"
}

// app-build-manifest.json

{
  "pages": {
    "/about/page": [
      "static/chunks/webpack-8074fabf81ca3fbd.js",
      "static/chunks/195-db44fa9abf093554.js",
      "static/chunks/main-app-803e1fe3b53f020b.js",
      "static/chunks/app/about/page-6987a0feb85b4acd.js"
    ],
    "/layout": [
      "static/chunks/webpack-8074fabf81ca3fbd.js",
      "static/chunks/195-db44fa9abf093554.js",
      "static/chunks/main-app-803e1fe3b53f020b.js",
      "static/chunks/18-2e6c8cce920f82ae.js",
      "static/chunks/app/layout-dcc43f51c2a9bbdd.js"
    ],
    "/error": [
      "static/chunks/webpack-8074fabf81ca3fbd.js",
      "static/chunks/195-db44fa9abf093554.js",
      "static/chunks/main-app-803e1fe3b53f020b.js",
      "static/chunks/app/error-db93127d83c335dd.js"
    ],
    "/head": [
      "static/chunks/webpack-8074fabf81ca3fbd.js",
      "static/chunks/195-db44fa9abf093554.js",
      "static/chunks/main-app-803e1fe3b53f020b.js",
      "static/chunks/app/head-1996c6f3fbadc526.js"
    ],
    "/users/[id]/page": [
      "static/chunks/webpack-8074fabf81ca3fbd.js",
      "static/chunks/195-db44fa9abf093554.js",
      "static/chunks/main-app-803e1fe3b53f020b.js",
      "static/chunks/app/users/[id]/page-2fc7e9c3197f876f.js"
    ],
    "/users/page": [
      "static/chunks/webpack-8074fabf81ca3fbd.js",
      "static/chunks/195-db44fa9abf093554.js",
      "static/chunks/main-app-803e1fe3b53f020b.js",
      "static/chunks/18-2e6c8cce920f82ae.js",
      "static/chunks/app/users/page-fd7c5623f6fc448f.js"
    ],
    "/page": [
      "static/chunks/webpack-8074fabf81ca3fbd.js",
      "static/chunks/195-db44fa9abf093554.js",
      "static/chunks/main-app-803e1fe3b53f020b.js",
      "static/chunks/app/page-0ade9e92e6720ce7.js"
    ]
  }
}

// build-manifest.json

{
  "polyfillFiles": [
    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
  ],
  "devFiles": [],
  "ampDevFiles": [],
  "lowPriorityFiles": [
    "static/4x80MmduflubJxJu0Rxo-/_buildManifest.js",
    "static/4x80MmduflubJxJu0Rxo-/_ssgManifest.js"
  ],
  "rootMainFiles": [
    "static/chunks/webpack-8074fabf81ca3fbd.js",
    "static/chunks/195-db44fa9abf093554.js",
    "static/chunks/main-app-803e1fe3b53f020b.js"
  ],
  "pages": {
    "/_app": [
      "static/chunks/webpack-8074fabf81ca3fbd.js",
      "static/chunks/main-3258d168ccaafc58.js",
      "static/chunks/pages/_app-dd974941ca63e050.js"
    ],
    "/_error": [
      "static/chunks/webpack-8074fabf81ca3fbd.js",
      "static/chunks/main-3258d168ccaafc58.js",
      "static/chunks/pages/_error-6f0db800e21332c5.js"
    ]
  },
  "ampFirstPages": []
}

philschonholzer avatar Dec 03 '22 10:12 philschonholzer

Works on Vercel edge functions: https://next-test-pearl-nu.vercel.app/users

philschonholzer avatar Dec 03 '22 12:12 philschonholzer

Thanks for reporting this! I confirm I can reproduce the issue. I think there's 2 separate issues, as indicated by the 2 different errors in the logs you shared... The "Cannot read properties of undefined (reading 'id')" error is fixed by https://github.com/netlify/next-runtime/pull/1896 in the latest runtime. However, the "Cannot read properties of null (reading 'default')" error is something new... the component is not being found in the bundle. We will take a look and post any updates here.

orinokai avatar Feb 06 '23 13:02 orinokai

Hey @philschonholzer!

The team at Netlify have now released the new v5 Next.js runtime which has support for both pages and app router, on-demand and time-based revalidation, automatic fine-grained cache control, and automatic image optimization using Netlify's image CDN. Can you try with the new runtime for us please?

You can find the documentation and additional information here: Next.js on Netlify

The v4 runtime is now in the maintenance support phase with no new features being added. Occasional bug fixes and security patches will be applied when needed.

Thanks!

MarcL avatar Apr 23 '24 12:04 MarcL

I tested with updated dependencies. It's working now 👍

philschonholzer avatar Apr 23 '24 13:04 philschonholzer