https://netsuiteprofessionals.com logo
Join Slack
Powered by
Trying to load the following 3rd party script (<ht...
# suitecommerce
c
Trying to load the following 3rd party script (https://docs.mapbox.com/mapbox-gl-js/api/), however, loading the script throws an error. Any suggestions? I did try following the instructions from this post (https://developers.suitecommerce.com/add-a-third-party-javascript-library-to-an-extension), however I still get the error.
Copy code
TypeError: deps is undefinedjavascript-libs.js:47:7
    insertPlugin <http://localhost:7777/tmp/javascript-libs.js:47>
    func <http://localhost:7777/tmp/javascript-libs.js:65>
    <anonymous> <https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js:4>
    <anonymous> <https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js:6>
s
What's 
deps
in your code supposed to do?
p
message has been deleted
this lib uses unnamed defines. Unnamed defines don't play nice with SCA
k
is there a way to fix that?
s
That was gonna be my second point. But it depends on how he's calling it
p
I'd suggest you download the code and make it assume define is not a function
c
if (‘requirejs’ in window) { // if requirejs is loaded before prolo.js. requirejs([‘https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js’], _function_(mapboxgl) { window.mapboxgl = mapboxgl; if (‘ProloInitialization’ in window) { ProloInitialization(); } }); }
s
we use almond and requirejs
almond doesn't like anonymous defines, where requirejs does
c
That is how the code is being loaded, I was going to comment out and load as an asset.
p
yes, and you have different headaches in local vs online, just for funsies (well, depends on the SCA version)
message has been deleted
c
sc 2019.2
s
so yeah, I would download it and add it to your local code. If the licence allows for modification, I would try to turn to into a proper defined module. Otherwise you can just call it via ajax
p
If it's for just one page you can still treat it as an asset, even from your FC
c
what is FC?
p
File Cabinet, sorry
c
_var_ promise = _jQuery_.ajax({
url: '<https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js>', //_.getAbsoluteUrl(getExtensionAssetsPath('mapbox-gl.js')),
dataType: 'script',
complete: _function_ (_e_) {
console.log('mapbox-gl.js: ' + _e_.statusText);
},
cache: true
});
p
but i think your safest bet is to edit the file to take the define out... another thing that i did once or twice which i'm not proud of... is to set define.amd = false But it's super dangerous.
try before that var promise = ... the following: define.amd = false
c
trying now
That worked!
👍 1
p
Ok. I wouldn't recommend you shipping that to production 🙂
but this tells you if you upload that file to the file cabinet, but with making this check false
Copy code
typeof define === 'function' && define.amd ? define(factory) :
then you'll most likely be OK.
c
Is that within the mapbox-gl.js file?
p
download, edit, upload to FC
load from there
@Steve Goldberg, license is https://opensource.org/licenses/BSD-3-Clause and i think they'll be good
Not sure if this js loads more JSs, then that could again become another problem.
c
What I think is interesting is the first 6 lines in that file, align to the “Add a 3rd party javascript library” instructions, however following the instructions didn’t work.
I will update and a big thank you!
p
Looking at the article, the library has a named define
Copy code
define('jquery.matchHeight', ['jQuery'], function ($)
{
    /*
c
I first replaced lines 2 - 6 with the that
p
oh but that is particular to that very library
the "Lucky for us, however, this is all a simple change. Replace the code sample above with the following:" can't be said exactly the same for this library
it's a bit more complex
c
Just to be clear… I am changing 
typeof define === 'function' && define.amd ? define(factory) :
(
_global_ = _global_ || self, _global_.mapboxgl = factory());
to 
typeof define === false;
p
yup
and then use window.mapboxgl in your code.
c
Believe I can edit the mapbox-gl.js directly in the FC. But do I need to re-activate the extension after each edit?
p
Where are you storing the mapbox-gl.js exactly in the file cabinet?
c
extension asset
p
ok then... i guess yes. but if i was you i'd just edit it in the deployed extension live path until getting it right instead
since it's just an asset - no processing
you just can develop by uploading it to Web Hosting FIles->Live Hosting Files->SSP Apps->Your SSP App->Extensions->Your Vendor->Your Extension->Your Vendor->assets or something like that
until getting it right
no need to waste 10 minutes every single time
c
Something is not right… 
(_function_ (_global_, factory) {
typeof 
_exports_ === 'object' && typeof _module_ !== 'undefined' ? _module_._exports_ = factory() :
typeof define === false : (
_global_ = _global_ || self, _global_.mapboxgl = factory());
}(this, (
_function_ () { 'use strict';
p
what's the outcome?
c
SyntaxError: unexpected token: ‘:’
p
let's do it even simpler
grab the original
c
(_function_ (_global_, factory) {
typeof 
_exports_ === 'object' && typeof _module_ !== 'undefined' ? _module_._exports_ = factory() :
typeof define === ‘function’ && define.amd ? define(factory) : (
_global_ = _global_ || self, _global_.mapboxgl = factory());
}(this, (
_function_ () { 'use strict';
p
and change in: typeof define === 'function' && define.amd ? the word function for funcNOT or something else other than function
we just need that clause to fail
c
Error is gone
thanks
p
Awesome
👍 1
k
thanks PZ
👍🏽 1
3 Views
Open in Slack
PreviousNext
Powered by