Bug - Site crashes after user searches property

[CodeWritingCow]

Describe the bug
When a user looks up a property and then clicks a link in the navbar, the web application crashes and shows a client-side error screen.

2117-e0c701d8057c2152.js:1 TypeError: Cannot read properties of undefined (reading 'getSource')
    at rx.getSource (05f6971a-22d488b7be83c68e.js:51:205574)
    at y (8556-344b47f3e82064cf.js:2:30526)
    at Object.setMarkers (8556-344b47f3e82064cf.js:2:31112)
    at n (8556-344b47f3e82064cf.js:2:72895)
    at f (8556-344b47f3e82064cf.js:2:32930)
    at Array.forEach (<anonymous>)
    at p (8556-344b47f3e82064cf.js:2:32990)
    at Q (8556-344b47f3e82064cf.js:2:35375)
    at eX.$destroy (8556-344b47f3e82064cf.js:2:36356)
    at push.94205.n.current.e.<computed>.n.current.$set (

To Reproduce
Steps to reproduce the behavior:

1. Go to https://cleanandgreenphilly.org/find-properties/884341730
2. Click on any link in navbar
3. See error

Expected behavior
When user clicks a navbar link, it should take them to the correct page without crashing.

Screen recording

Site.crashes.after.user.searches.property.mov

Screenshots
Error screen

Error message in browser console

Desktop (please complete the following information):

• OS: MacOS Monterey v12.7.6
• Browser Chrome
• Version 131.0.6778.109

Additional context
Reported by @brandonfcohen1 on Clean & Green Philly's Slack channel

[CodeWritingCow]

Running the app locally with the latest code from main branch, I was able to replicate the bug and see more detailed error messages. It appears the error might be related to maplibre or a recently installed dependency, maptiler/geocoding-control.

Error screen in local env:

Console error messages in local env:

So getSource is a maplibre-gl.js method:

This gives a better idea of what might be causing the bug. I'll continue looking into this.

[CodeWritingCow]

In production env (AKA the live website), I used a debugger in Google Chrome's DevTools to see what getSource is doing.

When user first navigates to find-properties page, getSource() is passed vacant-properties-tiles as the argument:

As the find-properties page loads, getSource() is passed full-geom as the argument:

Finally, user goes to get-access page. As the page loads (and before it crashes), getSource() is passed full-geom as the argument:

Perhaps this is related to the bug. It could also be a red herring.

[CodeWritingCow]

So the bug is caused by changes to Mapbox in PRs #1003 and #1008. I confirmed this by visiting the Vercel preview env for PR 1003 at https://vacant-lots-proj-13xrykfdy-clean-and-green-philly.vercel.app/

I also visited the Vercel preview envs for other front-end PRs submitted around the same time as PR 1003. The error did not occur in the Vercel preview envs for those PRs:

• 663 checkbox behavior #989
• make sure land bank filter works #999

The solution is to revert PRs 1003 and 1008. I tested this in my local env, and the error was not happening locally.

Screen recording

Here is a video recording of the error happening in Vercel preview env for 1003:

issue.1043.-.bug.mov