Uploaded image for project: 'Magnolia Frontend Helpers'
  1. Magnolia Frontend Helpers
  2. MGNLFE-549

SPA projects miss "key" property on SaaS - causing warnings

    XMLWordPrintable

Details

    • Bug
    • Resolution: Done
    • Neutral
    • 1.4
    • 1.3.3
    • None
    • None

    Description

      All React-based projects on SaaS have red warnings in the browser console and will have reduced performance because the child nodes of “EditableArea” do not have unique “key” properties which the React framework mandates.

      Warning message is:

      react.development.js:315 Warning: Each child in a list should have a unique "key" prop.

      You will need to test on SaaS instance.
       
      Technical notes:
      The reason appears to be that in the Magnolia react-editor iibrary, the EditableArea code usesr the @id property on the delivery endpoint response for that component to set the “key” value.

      See: https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/react-editor/src/component/EditableArea/EditableArea.js#89

      However - the Norsu Delivery Endpoint does not supply @id properties for the components as the JCR one does, therefore the react-editor does not set the key property.

      Some ideas:

      • Change react-editor to use @name property instead of @id?

       

      Please update React, Vue and Angular libraries in order to be consistant. (You will need to test on SaaS instance.)

      Norsu response example:

       

      {{}}

      {
        "@path": "/react-minimal",
        "@id": "7e41884d-162f-42b6-91ce-82a03a5ea96e",
        "@name": "react-minimal",
        "@nodeType": "mgnl:page",
        "mgnl:template": "react-minimal-lm:pages/basic",
        "name": "react-minimal",
        "title": "Let's create something amazing",
        "mgnl:lastModified": 1687194843,
        "extras": {
          "@name": "extras",
          "@path": "/react-minimal/extras",
          "@nodeType": "mgnl:area",
      
          "components[0]": {
            "@name": "components[0]",
            "@path": "/react-minimal/extras/components[0]",
            "@nodeType": "mgnl:component",
            "mgnl:template": "spa-lm:components/headline",
            "text": "In this issue",
            "@nodes": []
          }, 

       

      Testing on 2023-07-11

      Without fix, getting this error:

      With the fix, the warning is different:

      Checklists

        Acceptance criteria

        Attachments

          Activity

            People

              plequoc Phong Le Quoc
              czimmermann Christopher Zimmermann
              DeveloperX
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                Work Started:

                Checklists

                  Bug DoR
                  Task DoD

                  Time Tracking

                    Estimated:
                    Original Estimate - Not Specified
                    Not Specified
                    Remaining:
                    Remaining Estimate - Not Specified
                    Not Specified
                    Logged:
                    Time Spent - 2d 1h
                    2d 1h