Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Google Maps JS API will stop working in Cordova in May for iOS+Android #13094

Open
chandibernier opened this issue Apr 15, 2024 · 9 comments · May be fixed by #13165
Open

Google Maps JS API will stop working in Cordova in May for iOS+Android #13094

chandibernier opened this issue Apr 15, 2024 · 9 comments · May be fixed by #13165

Comments

@chandibernier
Copy link

chandibernier commented Apr 15, 2024

Google Maps JS API version 3.53 is the last one to be working in cordova and will stop being available in may (ref: source at the end of this issue). 3.54, 3.55 and 3.56 do not work under Meteor's cordova build (probably because they changed to ES2020 native while Meteor's cordova build is similar to the legacy build)

Error/expected behavior: The map supposed to be displayed is just a white rectangle and the error wee see in JS console is:
Uncaught (in promise) TypeError: oda.entries is not a function or its return value is not iterable

Meteor: 2.14 (it does not seem related to Meteor's version but changes in Google Maps)

During our debugging with help from Quave, we understood the issue seems to be in the bundle Meteor builds for Cordova (as opposed to modern-browser bundle).

We figure that out this way: When using our Cordova App in debug using Chrome inspector:
A-Using meteor's default cordova bundle, it fails with the error in the console
image

B-However, if using the same webview, again in the same inspector, to load Meteor's server URL, it loads modern-browser instead of cordova. And in that bundle, it works.
image

Conclusion of the test: This shows Cordova and the webview are OK and do support Google Maps JS ES2020 API and that Meteor's bundle built for cordova does not support loading dynamically Google Maps JS API.

Steps to reproduce the error and expected behavior:
In any Meteor cordova App running on Android (meteor run android-device), you open Chrome Inspector (desktop) and type:
A-
let aoda=new Map([[1,["msie"]],[2,["edge"]],[3,["chrome","crios"]],[5,["firefox","fxios"]],[4,["applewebkit"]],[6,["trident"]],[7,["mozilla"]]]);
for(const [d,e]of aoda.entries()){ console.log('d='+d +' e='+e)}

In Localhost:12490 (cordova/legacy Meteor bundle), it fails with the same error as Google Maps's JS API
image

However, if you change the URL of Cordova's inspector to a URL that links directly to your Meteor/node server, it will load Meteor.isModern bundle in the same webview/cordova and it works just fine (no error in the console):
image

Supplemental information
1-Google Maps JS api must be loaded dynamically (based on Google's terms of service) but in order to test, we did load Google Maps API statically so Babel was able to "compile" it (recommendation from Quave). That worked but it's not a long term solution for a production environnement because Google officially say it should not be done and can stop working at any time.

2-If we override the function Object.prototype.entries function and put a function that works with iterable, it continues executing Google Maps without that error. (but it gives a new error about Object.prototype.keys)

Conclusion:
In Meteor's bundle made for Cordova, it's impossible to load ES2020 scripts dynamically and Google Maps is like that.
We understand that Meteor's cordova bundle does overrides some built-in objects and functions like Object.prototype.entries/keys and that fails with dynamic loading of.modern scripts

Possible solutions:
-Use built-in Object.prototype.entries/keys in Cordova's bundle ?
-Build Cordova's Meteor bundle with a modern version? That could lead to incompatibilities with older phones I guess?

Sources from Google:
Google will stop offering v3.53 in May:
image
source: https://developers.google.com/maps/documentation/javascript/versions

Releases notes saying 3.54 is the first version built using ES2020:
https://developers.google.com/maps/documentation/javascript/releases#3.54.1

Meteor forums about this:
https://forums.meteor.com/t/using-google-maps-js-api-with-cordova/61428/8

@chandibernier
Copy link
Author

I forgot to mention, we did test in 2 different apps:
-Our app
-A blank new app just started for that

The results are exactly the same. It's only the bundle ( web.browser, web.browser.legacy, web.cordova) that makes it work or not work).

@paulincai
Copy link
Contributor

paulincai commented Apr 18, 2024

Hi @chandibernier, I don't know what is "Quave" and how it/he/they helped you debug but not fix, but it is clear that you need a custom build tool so you can independently set your bundle as modern regardless what the Meteor bundler is set to do. In the forum there is a hint where you can start with your development. Following the input from your colleagues, I think there should be enough for you and "Quave" to propose a resolution.

@chandibernier
Copy link
Author

Hi @paulincai ,

Thanks. We'll look into that and respond here and in Meteor forum.

PS: Quave is the development company where Filipe Nevola (ex CEO of Meteor) now works.

@rioadrian
Copy link

Hi is there any update about the gogle maps problem? My maps suddenly stop now and I still cannot solve the problem, I try changing Version start from v3.53 until 3.56 but still got error, please help me. Thanks in advance

@HoptimizeME
Copy link

HoptimizeME commented May 24, 2024

Yeah there's a fix you can do but it involves modifying one of Meteor's packages (ecmascript-runtime-client).

The 2 files are in Meteor's installation path (not your project path):

1: commenting out the 3 overrides (Symbol, Map and Set):
$HOME/.meteor/packages/ecmascript-runtime-client/0.12.1/web.cordova/legacy.js :
`try {
console.log("ligne1");
// Symbol = exports.Symbol = require("core-js/es/symbol");
console.log("ligne2");
// Map = exports.Map = require("core-js/full/map");
console.log("ligne3");
// Set = exports.Set = require("core-js/es/set");
console.log("ligne4");

} catch (e) {
throw new Error([
"The core-js npm package could not be found in your node_modules ",
"directory. Please run the following command to install it:",
"",
" meteor npm install --save core-js",
""
].join("\n"));
}

// ECMAScript 2015 polyfills.
require("core-js/es/array");
require("core-js/es/function");
require("core-js/es/math");
require("core-js/es/object");
require("core-js/es/regexp");
require("core-js/es/string");
require("core-js/es/weak-map");
require("core-js/es/weak-set");

// If the Reflect global namespace is missing or undefined, explicitly
// initialize it as undefined, so that expressions like _typeof(Reflect)
// won't throw in older browsers. Fixes #9598.
if (typeof Reflect === "undefined") {
global.Reflect = void 0;
}

// We want everything from the core-js/es/number module except
// es.number.constructor.
require('core-js/modules/es.number.epsilon');
require('core-js/modules/es.number.is-finite');
require('core-js/modules/es.number.is-integer');
require('core-js/modules/es.number.is-nan');
require('core-js/modules/es.number.is-safe-integer');
require('core-js/modules/es.number.max-safe-integer');
require('core-js/modules/es.number.min-safe-integer');
require('core-js/modules/es.number.parse-float');
require('core-js/modules/es.number.parse-int');

// Typed Arrays
require('core-js/modules/es.typed-array.uint8-array');
require('core-js/modules/es.typed-array.uint32-array');

require("./modern.js");`

2:Adjusting the metadata in web.cordova.json:
$HOME/.meteor/packages/ecmascript-runtime-client/0.12.1

{ "format": "isopack-2-unibuild", "uses": [ { "package": "meteor" }, { "package": "es5-shim", "constraint": "4.8.0", "weak": true }, { "package": "modules", "constraint": "0.17.0" }, { "package": "promise", "constraint": "0.12.0" }, { "package": "modern-browsers", "constraint": "0.1.5" } ], "resources": [ { "type": "source", "extension": "js", "file": "web.cordova/modern.js", "length": 886, "offset": 0, "usesDefaultSourceProcessor": true, "path": "modern.js", "hash": "4a267ceca3382709911d323e03fdd74a29dc04f8", "fileOptions": { "mainModule": false, "lazy": true } }, { "type": "source", "extension": "js", "file": "web.cordova/legacy.js", "length": 1747, "offset": 0, "usesDefaultSourceProcessor": true, "path": "legacy.js", "hash": "c694efe466751b132348a0acb6ec95aebd47ddb8", "fileOptions": { "mainModule": true, "lazy": false } }, { "type": "source", "extension": "js", "file": "web.cordova/versions.js", "length": 498, "offset": 0, "usesDefaultSourceProcessor": true, "path": "versions.js", "hash": "37752a2ce12accd0c3bfd0afc465b31bd04239f1", "fileOptions": { "lazy": true } } ], "node_modules": "npm/node_modules" }

Modyfying Meteor's files means that you must always use a modified Meteor version. We had to modify both our script that builds Cordova apps as well as our CI/CD process to make sure both apps and bundles served from the servers include this change.

The good news is that it does not require to submit anything to App Stores.

@HoptimizeME
Copy link

web.cordova.json
legacy.json

You must change legacy.json to legacy.js . I had to change it so I could upload it here.

@rioadrian
Copy link

web.cordova.json legacy.json

You must change legacy.json to legacy.js . I had to change it so I could upload it here.

Hi @HoptimizeME Thanks for your help and fast response to this issue I will try it now. But right now I have my mobile server on meteor galaxy, does your solutions affect the server and if yes, how do I implement the solutions to my server in galaxy? thanks in advance

@rioadrian
Copy link

Hi @HoptimizeME

Thank you for the working solutions, I have already deploy to my staging environment (meteor galaxy) and it worked like a charm without any changes other than that two files from you. I hope meteor team would like to add it on incoming update.

Best regards
Rio

Yeah there's a fix you can do but it involves modifying one of Meteor's packages (ecmascript-runtime-client).

The 2 files are in Meteor's installation path (not your project path):

1: commenting out the 3 overrides (Symbol, Map and Set): $HOME/.meteor/packages/ecmascript-runtime-client/0.12.1/web.cordova/legacy.js : `try { console.log("ligne1"); // Symbol = exports.Symbol = require("core-js/es/symbol"); console.log("ligne2"); // Map = exports.Map = require("core-js/full/map"); console.log("ligne3"); // Set = exports.Set = require("core-js/es/set"); console.log("ligne4");

} catch (e) { throw new Error([ "The core-js npm package could not be found in your node_modules ", "directory. Please run the following command to install it:", "", " meteor npm install --save core-js", "" ].join("\n")); }

// ECMAScript 2015 polyfills. require("core-js/es/array"); require("core-js/es/function"); require("core-js/es/math"); require("core-js/es/object"); require("core-js/es/regexp"); require("core-js/es/string"); require("core-js/es/weak-map"); require("core-js/es/weak-set");

// If the Reflect global namespace is missing or undefined, explicitly // initialize it as undefined, so that expressions like _typeof(Reflect) // won't throw in older browsers. Fixes #9598. if (typeof Reflect === "undefined") { global.Reflect = void 0; }

// We want everything from the core-js/es/number module except // es.number.constructor. require('core-js/modules/es.number.epsilon'); require('core-js/modules/es.number.is-finite'); require('core-js/modules/es.number.is-integer'); require('core-js/modules/es.number.is-nan'); require('core-js/modules/es.number.is-safe-integer'); require('core-js/modules/es.number.max-safe-integer'); require('core-js/modules/es.number.min-safe-integer'); require('core-js/modules/es.number.parse-float'); require('core-js/modules/es.number.parse-int');

// Typed Arrays require('core-js/modules/es.typed-array.uint8-array'); require('core-js/modules/es.typed-array.uint32-array');

require("./modern.js");`

2:Adjusting the metadata in web.cordova.json: $HOME/.meteor/packages/ecmascript-runtime-client/0.12.1

{ "format": "isopack-2-unibuild", "uses": [ { "package": "meteor" }, { "package": "es5-shim", "constraint": "4.8.0", "weak": true }, { "package": "modules", "constraint": "0.17.0" }, { "package": "promise", "constraint": "0.12.0" }, { "package": "modern-browsers", "constraint": "0.1.5" } ], "resources": [ { "type": "source", "extension": "js", "file": "web.cordova/modern.js", "length": 886, "offset": 0, "usesDefaultSourceProcessor": true, "path": "modern.js", "hash": "4a267ceca3382709911d323e03fdd74a29dc04f8", "fileOptions": { "mainModule": false, "lazy": true } }, { "type": "source", "extension": "js", "file": "web.cordova/legacy.js", "length": 1747, "offset": 0, "usesDefaultSourceProcessor": true, "path": "legacy.js", "hash": "c694efe466751b132348a0acb6ec95aebd47ddb8", "fileOptions": { "mainModule": true, "lazy": false } }, { "type": "source", "extension": "js", "file": "web.cordova/versions.js", "length": 498, "offset": 0, "usesDefaultSourceProcessor": true, "path": "versions.js", "hash": "37752a2ce12accd0c3bfd0afc465b31bd04239f1", "fileOptions": { "lazy": true } } ], "node_modules": "npm/node_modules" }

Modyfying Meteor's files means that you must always use a modified Meteor version. We had to modify both our script that builds Cordova apps as well as our CI/CD process to make sure both apps and bundles served from the servers include this change.

The good news is that it does not require to submit anything to App Stores.

@mjcctech mjcctech linked a pull request May 27, 2024 that will close this issue
@StorytellerCZ StorytellerCZ linked a pull request May 27, 2024 that will close this issue
@mjcctech
Copy link

mjcctech commented May 27, 2024

@HoptimizeME thanks for finding workaround to this issue. I encounter it as well and prepared fix. Better, temporary workaround is to copy directory https://github.com/tkhtechnology/meteor/tree/MX002-11818/packages/ecmascript-runtime-client to packages in your project. Meteor during building will use that patched package instead of official one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants