{N} 6.0 migration: Error: Failed to load component from module: - nativescript

Question

I’m upgrading my project to {N} 6.0 and hit an error I’m stuck on. Whenever my app displays a map page I get system errors:
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onClick failed
System.err: Error: Failed to load component from module: ./views/map-page/
System.err:
System.err: StackTrace:
System.err: Frame: function:'loadInternal', file:'file:///node_modules/tns-core-modules/ui/builder/builder.js:82:0
System.err: Frame: function:'', file:'file:///node_modules/tns-core-modules/ui/builder/builder.js:62:0
System.err: Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.navigate', file:'file:///node_modules/tns-core-modules/ui/frame/frame-common.js:129:0
So, this error occurs while the app is navigating to the map page, but the page’s .js file never receives control. I thought the problem might be that the google-maps-sdk uses a namespace definition,
<Page
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:maps="nativescript-google-maps-sdk"
navigatingTo="onNavigatingTo" navigatingFrom="onNavigatingFrom" loaded="onLoaded" class="page”>
But I have other pages with namespaces (sidedrawer) and they work OK. I’ve read through the {N} 6.0 migration docs and I can’t find anything that seems to match. At this point I’ve run out of ideas to pursue.

Answer 1

Wow, this was subtle... after further debugging and comparing to code that worked, this was the code in error:
// Navigate to map-page to show selected map
var navigationOptions = {
moduleName: "./views/map-page/",
context: { bindingContext: viewModel }
}
frame.topmost().navigate(navigationOptions);
The problem was the trailing slash on the moduleName. Once I removed that, the map page worked as expected, just as it had in {N} 3, 4, and 5.
Oh well, at least it's working!