I have a huge array of objects called steamData that look like this:

 {
        "sid": 1690,
        "store_url": "https://store.steampowered.com/app/1690",
        "store_promo_url": null,
        "store_uscore": 69,
        "published_store": "2006-10-16",
        "published_meta": "2006-10-16",
        "published_stsp": "2006-10-16",
        "published_hltb": "2020-04-18",
        "published_igdb": "2006-09-01",
        "image": "https://steamcdn-a.akamaihd.net/steam/apps/1690/header.jpg",
        "name": "Space Empires V",
        "description": "Space Empires V is the latest edition in the Space Empires series. This new chapter completely updates the UI and takes ...",
        "full_price": 1999,
        "current_price": 499,
        "discount": 75,
        "platforms": "WIN",
        "developers": "Malfador Machinations",
        "publishers": "Strategy First",
        "languages": "English",
        "voiceovers": null,
        "categories": "Single-player,Multi-player",
        "genres": "Strategy",
        "tags": "Strategy,4X,Space,Sci-fi,Turn-Based,Singleplayer,Turn-Based Strategy,Multiplayer",
        "achievements": null,
        "gfq_url": "https://gamefaqs.gamespot.com/pc/927958-space-empires-v?ftag=MCD-06-10aaa1f",
        "gfq_difficulty": "Just Right-Tough",
        "gfq_difficulty_comment": "<a href="/games/rankings?platform=19&genre=45&list_type=diff&dlc=1&page=22&game_id=927958&min_votes=2#1114"><b>#1114</b></a> hardest PC strategy game (<a href="/games/rankings?platform=19&list_type=diff&dlc=1&page=122&game_id=927958&min_votes=2#6145"><b>#6145</b></a> on PC, <b>#24997</b> overall)",
        "gfq_rating": 3.54,
        "gfq_rating_comment": "<a href="/games/rankings?platform=19&genre=45&list_type=rate&view_type=1&dlc=1&page=16&game_id=927958&min_votes=2#818"><b>#818</b></a> lowest rated PC strategy game (<a href="/games/rankings?platform=19&list_type=rate&view_type=1&dlc=1&page=163&game_id=927958&min_votes=2#8199"><b>#8199</b></a> on PC, <b>#33932</b> overall)",
        "gfq_length": 68.6,
        "gfq_length_comment": "<a href="/games/rankings?platform=19&genre=45&list_type=time&dlc=1&page=2&game_id=927958&min_votes=2#119"><b>#119</b></a> longest PC strategy game (<a href="/games/rankings?platform=19&list_type=time&dlc=1&page=12&game_id=927958&min_votes=2#618"><b>#618</b></a> on PC, <b>#1757</b> overall)",
        "stsp_owners": 75000,
        "stsp_mdntime": null,
        "hltb_url": "https://howlongtobeat.com/game?id=8846",
        "hltb_single": 10,
        "hltb_complete": null,
        "meta_url": "https://www.metacritic.com/game/pc/space-empires-v?ftag=MCD-06-10aaa1f",
        "meta_score": 68,
        "meta_uscore": 77,
        "grnk_score": 65,
        "igdb_url": "https://www.igdb.com/games/space-empires-v",
        "igdb_single": null,
        "igdb_complete": null,
        "igdb_score": 65,
        "igdb_uscore": 50,
        "igdb_popularity": 1.89
    },

I’m trying to sort this array by it’s published_meta date newest to oldest:

 if (!loading) {
    // Sort from oldest to youngest
    steamData.sort((a, b) => (b)?.published_meta.localeCompare((a)?.published_meta));

    // Get today as milliseconds
    let today = new Date().toLocaleDateString('en-CA');
    let todayMS = Date.parse(today);

    // Get index of closest element to today
    let closestIndex = steamData.reduce((acc, obj, index) => {
      let diff = Math.abs(Date.parse(obj?.published_meta) - todayMS);
      return acc.diff > diff ? { diff, index } : acc;
    }, { diff: Infinity, index: null }).index;

    // Move closest element to start of array
    steamData.unshift(newTrending.splice(closestIndex, 1));
  }

I keep running into the error “Cannot read properties of null (reading ‘localeCompare’)”

Some of the objects are have null as their published dates (published_meta seems to have the fewest of these). I thought optional chaining would fix this but it has not.

How can I sort the steamData array to use?