Strapi v5 dynamic zone react router compatibility

[Sagar-echo]

Bug report

Required System information

• Is your project Javascript or Typescript: ts Environment: development OS: darwin-arm64 Strapi Version: 5.0.6 Node/Yarn Version: npm/8.3.1 node/v18.1.0 darwin arm64 workspaces/false Edition: Community Database: postgres

Describe the bug

Unable to view or create content of content types where dynamic zone is being used

Steps to reproduce the behavior

1. create any content type with dynamic zone field as shown in code snippets schema below

2. Go to Content manager of content type where tags input is used.

3. See error -

TypeError: Cannot read properties of undefined (reading 'push')
    at http://localhost:1337/node_modules/.strapi/vite/deps/chunk-SEHFDLV6.js?v=8b2fa299:6465:33
    at Array.reduce (<anonymous>)
    at formatEditLayout (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-SEHFDLV6.js?v=8b2fa299:6457:5)
    at http://localhost:1337/node_modules/.strapi/vite/deps/chunk-SEHFDLV6.js?v=8b2fa299:6410:33
    at updateMemo (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-C7FK75VY.js?v=8b2fa299:12230:27)
    at Object.useMemo (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-C7FK75VY.js?v=8b2fa299:12746:24)
    at Object.useMemo (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-5EO7PTNQ.js?v=8b2fa299:1094:29)
    at useDocumentLayout (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-SEHFDLV6.js?v=8b2fa299:6409:30)
    at ListViewPage (http://localhost:1337/node_modules/.strapi/vite/deps/ListViewPage-CELx2ysp-B6KKA7WA.js?v=8b2fa299:677:20)
    at renderWithHooks (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-C7FK75VY.js?v=8b2fa299:11568:26)

Expected behavior

To be able to view and create content

Screenshots

If applicable, add screenshots to help explain your problem.

Code snippets

content type with dynamic zone field as below

{
  "kind": "collectionType",
  "collectionName": "blog_ads",
  "info": {
    "singularName": "blog-ad",
    "pluralName": "blog-ads",
    "displayName": "blog-ad",
    "description": ""
  },
  "options": {
    "draftAndPublish": true
  },
  "pluginOptions": {},
  "attributes": {
    "articleTitle": {
      "type": "string"
    },
    "url": {
      "type": "string",
      "required": true,
      "unique": true
    },
    "authorName": {
      "type": "relation",
      "relation": "oneToOne",
      "target": "api::author-ad.author-ad"
    },
    "metaTitle": {
      "type": "string"
    },
    "metaDescription": {
      "type": "string"
    },
    "canonicalUrl": {
      "type": "string"
    },
    "seoTags": {
      "type": "customField",
      "options": {
        "output": "HTML",
        "preset": "rich"
      },
      "customField": "plugin::ckeditor.CKEditor"
    },
    "contentBeforeToc": {
      "type": "dynamiczone",
      "components": [
        "relation.blog-ad-tc",
        "relation.blog-ad-collapsible",
        "relation.blog-ad-embed",
        "relation.blog-ad-swc",
        "text-editor.rich-text-ck"
      ]
    },
    "contentAfterToc": {
      "type": "dynamiczone",
      "components": [
        "relation.blog-ad-collapsible",
        "relation.blog-ad-embed",
        "relation.blog-ad-swc",
        "relation.blog-ad-tc",
        "text-editor.rich-text-ck"
      ]
    },
    "topics": {
      "type": "relation",
      "relation": "oneToOne",
      "target": "api::topic-ad.topic-ad"
    },
    "slug": {
      "type": "uid",
      "targetField": "articleTitle",
      "required": true
    },
    "tags": {
      "type": "customField",
      "customField": "plugin::tagsinput.tags"
    }
  }
}

[yevhenskakun]

Same issue for 5.0.6

TypeError: Cannot read properties of undefined (reading 'push')
    at http://localhost:1337/node_modules/.strapi/vite/deps/chunk-NKD4AVD5.js?v=ffb7bc35:1069:33
    at Array.reduce (<anonymous>)
    at formatEditLayout (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-NKD4AVD5.js?v=ffb7bc35:1061:5)
    at http://localhost:1337/node_modules/.strapi/vite/deps/chunk-NKD4AVD5.js?v=ffb7bc35:1014:32
    at updateMemo (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-DPNMX4ZV.js?v=ffb7bc35:12230:27)
    at Object.useMemo (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-DPNMX4ZV.js?v=ffb7bc35:12746:24)
    at Object.useMemo (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-BCGHH3YY.js?v=ffb7bc35:1094:29)
    at useDocumentLayout (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-NKD4AVD5.js?v=ffb7bc35:1013:28)
    at ListViewPage (http://localhost:1337/node_modules/.strapi/vite/deps/ListViewPage-CELx2ysp-PG5AYJTX.js?v=ffb7bc35:675:20)
    at renderWithHooks (http://localhost:1337/node_modules/.strapi/vite/deps/chunk-DPNMX4ZV.js?v=ffb7bc35:11568:26)

[alanzdr]

This fix was already made two weeks ago. Here: https://github.com/strapi/strapi/commit/ebaf1403e4d8c2044e42cc82e6e4573205348691

However, for some reason it is not in the final code:

@remidej Wouldn't it be possible that someone forgot to run the build on publish to npm?

[remidej]

Hello, as @alanzdr mentioned, this would have been fixed in 5.0.2+. I just tested in a new 5.1.0 app and I can't reproduce it.

I think you need to just build your app after upgrading your Strapi. Could you try running yarn build or npm run build and rerunning your app?

[alanzdr]

@remidej The code I showed is the strapi build inside node_modules, i had deleted everything and installed it again and it gave the same error, but you're right, now in the version 5.1.0 it's already working normally. thanks.

[Marc-Roig]

closing as it seems the issue is fixed!