Skip to content
šŸ‘‹ Next.js Conf 2024: Come build, party, run, and connect with us! See all events
Get help on Slack

Issue with rendering links differently in production build compared to development build.

11 replies
Last updated: Feb 14, 2022
Hi, has anyone experienced this before? I'm stumped on this one I tried upgrading to the new react/portabletext library and the same issue exists. The really strange thing is it only shows in production build not in dev. https://github.com/sanity-io/block-content-to-react/issues/59
Feb 11, 2022, 6:16 PM
All links look correct in the data both prod and dev but rendering differently.
Note the attached images showing the hover with wrong link in prod vs dev (correct).

{
  "_id": null,
  "__typename": "SanitySectionCard",
  "_key": "760651869c6f",
  "narrowWidth": null,
  "_rawBody": [
    {
      "_key": "67630a4a912f",
      "_type": "block",
      "children": [
        {
          "_key": "02ac9a0b9592",
          "_type": "span",
          "marks": [
            "strong",
            "textCenter"
          ],
          "text": "ONLINE RESOURCES"
        }
      ],
      "markDefs": [],
      "style": "normal"
    },
    {
      "_key": "0cf9832a1c52",
      "_type": "block",
      "children": [
        {
          "_key": "da53108a6d4b0",
          "_type": "span",
          "marks": [
            "276420a6692f",
            "textCenter"
          ],
          "text": "Print Your ID at Home"
        }
      ],
      "markDefs": [
        {
          "_key": "276420a6692f",
          "_type": "link",
          "href": "<http://embed.academyart.edu/embed?e=f8e8fc84-1f52-48e3-8136-f696c15c4b90>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "a3ce50e0910c",
      "_type": "block",
      "children": [
        {
          "_key": "cdae97c580ee0",
          "_type": "span",
          "marks": [
            "2acd61c23e9b",
            "textCenter"
          ],
          "text": "Career Development"
        }
      ],
      "markDefs": [
        {
          "_key": "2acd61c23e9b",
          "_type": "link",
          "href": "<https://my.academyart.edu/resources/career-services>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "570e44a1d6eb",
      "_type": "block",
      "children": [
        {
          "_key": "53174ef4af4b0",
          "_type": "span",
          "marks": [
            "277857c3de63",
            "textCenter"
          ],
          "text": "Help Desk"
        }
      ],
      "markDefs": [
        {
          "_key": "277857c3de63",
          "_type": "link",
          "href": "<https://admin.academyart.edu/admin/report.do>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "5030ef1cab69",
      "_type": "block",
      "children": [
        {
          "_key": "02eefcf41fdc0",
          "_type": "span",
          "marks": [
            "d64bf603704f",
            "textCenter"
          ],
          "text": "Scholarships"
        }
      ],
      "markDefs": [
        {
          "_key": "d64bf603704f",
          "_type": "link",
          "href": "<https://www.academyart.edu/finances/scholarships/>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "2bc677099081",
      "_type": "block",
      "children": [
        {
          "_key": "08229471c057",
          "_type": "span",
          "marks": [
            "textCenter",
            "fe8893c15e0c"
          ],
          "text": "Guest Speaker Archive"
        }
      ],
      "markDefs": [
        {
          "_key": "fe8893c15e0c",
          "_type": "link",
          "href": "<https://speakers.academyart.edu/content/guest-speakers.html>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "47d9f3073c28",
      "_type": "block",
      "children": [
        {
          "_key": "1dfd00ed5495",
          "_type": "span",
          "marks": [
            "textCenter",
            "7bc72f30f1be"
          ],
          "text": "Spring Show Gallery"
        }
      ],
      "markDefs": [
        {
          "_key": "7bc72f30f1be",
          "_type": "link",
          "href": "<https://springshow.academyart.edu>",
          "style": "link"
        }
      ],
      "style": "normal"
    }
  ],
  "_rawBodyRight": [
    {
      "_key": "e15db2ed4f45",
      "_type": "block",
      "children": [
        {
          "_key": "b72ce86e0653",
          "_type": "span",
          "marks": [
            "strong",
            "textCenter"
          ],
          "text": "ACADEMIC RESOURCES"
        }
      ],
      "markDefs": [],
      "style": "normal"
    },
    {
      "_key": "ecd71729fdd4",
      "_type": "block",
      "children": [
        {
          "_key": "5e5f209a511d0",
          "_type": "span",
          "marks": [
            "c0c49961c516",
            "textCenter"
          ],
          "text": "Homework Help"
        }
      ],
      "markDefs": [
        {
          "_key": "c0c49961c516",
          "_type": "link",
          "href": "<https://aa-myacademy-web.vercel.app/my-academy/academy-resource-center/online-support/>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "461184bf2c6e",
      "_type": "block",
      "children": [
        {
          "_key": "f6763a95c2510",
          "_type": "span",
          "marks": [
            "9da6b4508912",
            "textCenter"
          ],
          "text": "Library"
        }
      ],
      "markDefs": [
        {
          "_key": "9da6b4508912",
          "_type": "link",
          "href": "<https://library.academyart.edu/>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "9013ab68f551",
      "_type": "block",
      "children": [
        {
          "_key": "261130a277230",
          "_type": "span",
          "marks": [
            "9748da10624d",
            "textCenter"
          ],
          "text": "Music Library"
        }
      ],
      "markDefs": [
        {
          "_key": "9748da10624d",
          "_type": "link",
          "href": "<http://discussion.academyart.edu/music>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "7e31696fe4b4",
      "_type": "block",
      "children": [
        {
          "_key": "f4f83e3c975e0",
          "_type": "span",
          "marks": [
            "41755f4fb89b",
            "textCenter"
          ],
          "text": "Software Tutorials"
        }
      ],
      "markDefs": [
        {
          "_key": "41755f4fb89b",
          "_type": "link",
          "href": "<http://resources.academyart.edu/student-resources/aau-101-resources/total-training.html>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "283d2e25fc15",
      "_type": "block",
      "children": [
        {
          "_key": "65e9936fafe70",
          "_type": "span",
          "marks": [
            "506c9446cb0b",
            "textCenter"
          ],
          "text": "Textbooks"
        }
      ],
      "markDefs": [
        {
          "_key": "506c9446cb0b",
          "_type": "link",
          "href": "<http://aoa.ecampus.com/>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "9418812e4687",
      "_type": "block",
      "children": [
        {
          "_key": "53f51481f30f0",
          "_type": "span",
          "marks": [
            "a4156fd9c447",
            "textCenter"
          ],
          "text": "Class Supplies"
        }
      ],
      "markDefs": [
        {
          "_key": "a4156fd9c447",
          "_type": "link",
          "href": "<http://howto.academyart.edu/manage/lms/buying-class-supplies>"
        }
      ],
      "style": "normal"
    }
  ],
  "backgroundColor": {
    "_key": null,
    "_type": null,
    "title": "White",
    "value": "white"
  }
}
Feb 11, 2022, 6:32 PM
div
in 
a
is another issue will fix that šŸ™‚
Feb 11, 2022, 6:32 PM
Data for link highlighted:
{
      "_key": "47d9f3073c28",
      "_type": "block",
      "children": [
        {
          "_key": "1dfd00ed5495",
          "_type": "span",
          "marks": [
            "textCenter",
            "7bc72f30f1be"
          ],
          "text": "Spring Show Gallery"
        }
      ],
      "markDefs": [
        {
          "_key": "7bc72f30f1be",
          "_type": "link",
          "href": "<https://springshow.academyart.edu>",
          "style": "link"
        }
      ],
      "style": "normal"
    }
is somehow picking up this other links url in production build even tho same data:

{
      "_key": "570e44a1d6eb",
      "_type": "block",
      "children": [
        {
          "_key": "53174ef4af4b0",
          "_type": "span",
          "marks": [
            "277857c3de63",
            "textCenter"
          ],
          "text": "Help Desk"
        }
      ],
      "markDefs": [
        {
          "_key": "277857c3de63",
          "_type": "link",
          "href": "<https://admin.academyart.edu/admin/report.do>"
        }
      ],
      "style": "normal"
    },
Feb 11, 2022, 6:39 PM
Data for link highlighted:
{
      "_key": "47d9f3073c28",
      "_type": "block",
      "children": [
        {
          "_key": "1dfd00ed5495",
          "_type": "span",
          "marks": [
            "textCenter",
            "7bc72f30f1be"
          ],
          "text": "Spring Show Gallery"
        }
      ],
      "markDefs": [
        {
          "_key": "7bc72f30f1be",
          "_type": "link",
          "href": "<https://springshow.academyart.edu>",
          "style": "link"
        }
      ],
      "style": "normal"
    }
is somehow picking up this other links url in production build even tho same data:

{
      "_key": "570e44a1d6eb",
      "_type": "block",
      "children": [
        {
          "_key": "53174ef4af4b0",
          "_type": "span",
          "marks": [
            "277857c3de63",
            "textCenter"
          ],
          "text": "Help Desk"
        }
      ],
      "markDefs": [
        {
          "_key": "277857c3de63",
          "_type": "link",
          "href": "<https://admin.academyart.edu/admin/report.do>"
        }
      ],
      "style": "normal"
    },
Feb 11, 2022, 6:39 PM
Tried changing the link mark in our code to the default example same issue so pretty sure it's not our serializer code.
Feb 11, 2022, 6:44 PM
Any good place to start debugging this in the react portable text lib?
Feb 11, 2022, 6:45 PM
Does react portable text have any logic switching on dev vs prod or is this a gatsby issue? I even tried downgrading gatsby and other libs no luck.
Feb 11, 2022, 6:46 PM
Hmm I removed my serializer link mark completely and it fixed it so I guess it is related to our serializer code. Could it be something with this? I'll try 
useMemo
https://github.com/portabletext/react-portabletext#using-a-react-context
Feb 11, 2022, 7:04 PM
Hmm I removed my serializer link mark completely and it fixed it so I guess it is related to our serializer code. Could it be something with this? I'll try 
useMemo
https://github.com/portabletext/react-portabletext#using-a-react-context
Feb 11, 2022, 7:04 PM
Well this sounds crazy but fixing the nested 
div
inside the 
a
fixed it! I'll update the gh issue.. might be some side effect with react dom rendering cacheing something if invalid dom nesting šŸ¤· hopefully this helps someone else later.
Feb 11, 2022, 7:35 PM
Thanks for walking us through how you found a solution!
Feb 14, 2022, 5:36 PM

Sanityā€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?