next-runtime icon indicating copy to clipboard operation
next-runtime copied to clipboard

Published 20 hours ago • verified publisher icon netlify

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

Open philschonholzer opened this issue 2 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