T
TanStack•5mo ago
rising-crimson

How to use VSCode breakpoints in code-split route components?

When i try to add a breakpoint to a route component the breakpoint works but it attaches to the SplitComponent which makes it really hard to work with breakpoints in route components.
No description
3 Replies
rising-crimson
rising-crimsonOP•5mo ago
this is an example where the code execution pauses. The debug view works and the variables can be inspected but I would expect for the breakpoint to appear in my actual file.
No description
foreign-sapphire
foreign-sapphire•5mo ago
looks like sourcemaps are not picked up. are there inline sourcemaps in that compile file?
rising-crimson
rising-crimsonOP•4mo ago
Sorry nor not replying here. Somehow got lost.. Yes there are at the very bottom: //# sourceMappingURL=data:application/json;base64,eyJ2ZXJz..... I also decoded that base64 and it looks OK to me though I am not an expert. here is a shortened version: 
{
  "version": 3,
  "mappings": "AAuEgB,SAYJ......",
  "names": [
    "CircularProgress",
    "useState",
    "FullHeightBox",
    "ErrorState",
    "useMapLayers",
    "useTripSearchV2Search",
    "prepareMapData",
    "ExploreLayersBackButton",
    "ExploreLayersMap",
    "ExploreMapLayerFab",
    "getModeResult",
    "Route",
    "SplitComponent",
    "ModeDetailsMapComponent",
    "_s",
    "isPending",
    "isTripPending",
    "data",
    "tripData",
    "isError",
    "isTripError",
    "mapLayerData",
    "isMapLayerPending",
    "isMapLayerError",
    "mode",
    "useParams",
    "associatedMapLayers",
    "mapLayers",
    "filter",
    "layer",
    "exploreOptionsModes",
    "includes",
    "undefined",
    "modeResult",
    "content",
    "selectedLayers",
    "setSelectedLayers",
    "mapData",
    "_c",
    "component",
    "$RefreshReg$"
  ],
  "ignoreList": [],
  "sources": ["explore_.$mode_.map.tsx?tsr-split=component"],
  "sourcesContent": [
    "import { CircularProgress } from \"@mui/material\";\....REST_OF_FILE"
  ],
  "file": "ABSOLUTE_PATH_TO_FILE_ON_DISK"
}
{
  "version": 3,
  "mappings": "AAuEgB,SAYJ......",
  "names": [
    "CircularProgress",
    "useState",
    "FullHeightBox",
    "ErrorState",
    "useMapLayers",
    "useTripSearchV2Search",
    "prepareMapData",
    "ExploreLayersBackButton",
    "ExploreLayersMap",
    "ExploreMapLayerFab",
    "getModeResult",
    "Route",
    "SplitComponent",
    "ModeDetailsMapComponent",
    "_s",
    "isPending",
    "isTripPending",
    "data",
    "tripData",
    "isError",
    "isTripError",
    "mapLayerData",
    "isMapLayerPending",
    "isMapLayerError",
    "mode",
    "useParams",
    "associatedMapLayers",
    "mapLayers",
    "filter",
    "layer",
    "exploreOptionsModes",
    "includes",
    "undefined",
    "modeResult",
    "content",
    "selectedLayers",
    "setSelectedLayers",
    "mapData",
    "_c",
    "component",
    "$RefreshReg$"
  ],
  "ignoreList": [],
  "sources": ["explore_.$mode_.map.tsx?tsr-split=component"],
  "sourcesContent": [
    "import { CircularProgress } from \"@mui/material\";\....REST_OF_FILE"
  ],
  "file": "ABSOLUTE_PATH_TO_FILE_ON_DISK"
}

Did you find this page helpful?