[TIMOB-27206] LiveView: unable to require files under node_modules
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | None |
Status | Open |
Resolution | Unresolved |
Affected Version/s | n/a |
Fix Version/s | n/a |
Components | LiveView |
Labels | alloy, engSchedule, liveview |
Reporter | Brenton House |
Assignee | Ewan Harris |
Created | 2019-07-02T19:52:43.000+0000 |
Updated | 2021-02-22T20:01:37.000+0000 |
Description
SDK: 8.0.2.GA
Titanium: 5.2.1
Alloy: 1.14.0-1
--------------------------------
UPDATE: Upon further investigation, I've found that it is more than just Alloy.Globals that is being affected by this. Every time alloy is required using
require()
it is getting a fresh version so any changes that were made to the same module in a different class are lost.
require('/alloy') on index.js gets a clean version and thus all changes made in alloy.js are gone. Even if I move all the logic of assigning things to Alloy.Globals to index.js, everything added is gone when the next controller is loaded.
I have a stand-alone project that I can share to duplicate this issue.
--------------------------------
When defining an event handler function in alloy.js:
Alloy.Globals.eventHandler = e => {
console.error('you are here → Alloy.Globals.eventHandler1');
alert('button clicked 1');
}
and then using it in index.xml:
<Label id="label1" onClick="Alloy.Globals.eventHandler" text="Hello, World" />
When this auto-generated controller code is executed:
$.addListener($.__views.label1, 'click', Alloy.Globals.eventHandler);
It gets to this code in the BaseController:
proxy.addEventListener(type, callback);
and then throws an error because callback is undefined.
[INFO] [LiveView] Error Evaluating app.js @ Line: 430
[ERROR] Error: Invalid type passed to function
[ERROR] File: app.js
[ERROR] Line: 430
[ERROR] SourceId: <null>
[ERROR] Backtrace:
[ERROR] undefined
The file is actually BaseController.js Line: 430 but it just reports app.js when using LiveView.
NOTE: This does not happen in every app. I am not sure how LiveView is handling alloy.js code so I might need to get more familiar with that before I can say what or why Alloy.Globals.eventHandler would be undefined even though it is defined in alloy.js.
So this looks down to be reproducible sample vendoring the node_modules. Here's my observations * The
require('alloyxl')
call at the top of the file seems to be the root cause of the problems here * This is because liveview has no real support for loading from node_modules, it has some code that was used to support loading the polyfilling libs that looks into the Resources dir as well as the build dir, so when requiringalloyxl
the liveview server cant find the module and responds with a 404, causing the liveview app code to fallback to the "native require", which does know about node_modules, so requires it successfully, I believe this fallback is intended for native modules and not js files. * I suspect that because of the differences in how the require mechanisms work, this is then causing problems which is breaking Alloy.Globals. Commenting out that require, or putting an alloyxl.js file under lib fixes the issue. I guess technically this is a bug in liveview, but it's due to a use case that liveview has never stated to support (but it should).I added another test to the app where I am doing a new require from node_modules: require('test1') When I do this in alloy.js and assign a property a value, that value is still there when I require it again in index.js. This would seem to contradict the theory from above...
The flip-side also seems to be an issue. If I am requiring a file (like alloy.js) from a JavaScript file under node_modules, it seems to give me a new context and any properties that were set on it at runtime are absent.