Broken apps using 5.4 and LegacyMode=false

[NathanaelA]

Not sure if this is something to be posted here or the webpack issues...

Environment
Created a brand new test app today; latest of everything..

• CLI: 5.4
• Cross-platform modules: 5.4
• Android Runtime: 5.4
• iOS Runtime: 5.4
• Plugin(s): (none extra)
• Webpack 0.22

Describe the bug
If you set "useLegacyWorkflow": false everything works great
If you set "useLegacyWorkflow": true most of the app is broken...

To Reproduce
Happens on both iOS and Android.
You can download my repo from: https://github.com/NathanaelA/event-order and build with Webpack disabled; and you should see something like this when you click the "Navigate" button.

JS: ----------------------------------
JS: Starting navigation to aa-page
JS: aa-Page actually loaded and parsed by JavaScript Engine
JS: NavigatingFrom main-page
JS: NavigatingTo aa-page
JS: loaded aa-page
JS: layoutChanged aa-page
JS: unloaded main-page
JS: NavigatedFrom main-page
JS: NavigatedTo aa-page

Delete your platforms, delete app off of phone/emulator, disable LegacyMode and try it again and you will see this:

----------------------------------
JS: Starting navigation to aa-page
JS: NavigatingFrom main-page
JS: unloaded main-page
JS: NavigatedFrom main-page

First of all you will see NONE of the aa-page events are wired up. AND on the AA-page; the navigate button is disabled (so it also didn't wire up).

Please note Android is easier to test than iOS as I don't have a close button (yet) on the showmodal call; the ShowModal button is also likewise broken..

Expected behavior
Things to work in a Webpacked app. 😀

Sample project
https://github.com/NathanaelA/event-order

[PeterStaev]

I was able to find the problem with the Nathanael's app above. The thing about webpack is that it is very picky with modules. So for webpack /a-module and a-module are two different things. The current implementation for the NS webpack registers pages without a slash in front. In the demo above the navigation (and modal open) is done like this:

frame.topmost().navigate("/"+navigationPage);
frame.topmost().currentPage.showModal("/modal-page", {closeCallback: close});

Although the XML loads fine the JS module that should be bound for all the events is not found because there are no such modules. So it fails silently w/o logging anything in the console and works as if there is no JS file for the XML. Simply removing / from the navigation paths fixes the problem and the app works as expected.

[PeterStaev]

@NathanaelA , actually this was changed at some point. Can't say when exactly but currently it does not look relatively at the path you send. You can move the aa-page in a separate folder and see for yourself.

I can say for sure that since NS 4.2 the navigate() does not consider the path to be relative as I have 2 production apps that we used this approach to develop using standard workflow and on production they are compiled with Webpack. And the navigate paths are w/o a leading slash in both cases and work perfectly fine.

[rosen-vladimirov]

Hey @NathanaelA , @PeterStaev ,
Thank you guys for the investigation. We are a little bit behind with investigating these issues and such help is really appreciated. As @NathanaelA suggested, we'll probably stick to documenting this behavior.
Thanks again for your time, you are awesome!

[vakrilov]

Hey folks,
As part of NativeScript/NativeScript#7386 we have add a logic that sanitizes module names and should handle cases when the module starts with "\" or "~\". This should make the above paths back-compatible.

About better logging when something fails - we have small improvements in this area too, although I'm sure more can be done.

[vakrilov]

I spoke too early 😊
I've made a PR(NativeScript/NativeScript#7418) handling this particular case.