At a Loss regarding importing JS files

Post reply
0 favourites
  • 9 posts

  • I have managed to (and very easily) add openlayers.js to my project and get it working nicly with the new HTML element.

    I did this simply by importing the ol.js and ol.css files, putting the JS file in scripts and I set its purpose as "importforevents". Then I found that in my events I can initialise the map and make changes to it ETC. Great!

    My next step was to add another script for "charts", so I did the same but realised that when I set the chart JS file to importForEvents it removes this purpose from the OL.js.

    So did some reading up and read I need to import these JS script into main and into a seperate "importForEvents.js" file to make them available inside events.

    So to keep things simply I thought I would attempt this with JUST the ol.js but I am having no luck whatsoever.

    Current "non working" situation is:

    Main.js (purpose set to main) 

    	import * as myMaps from "./ol.js";

    importForEvents.js (Purpose set to importForEvents) 

    	import * as myMaps from "./ol.js";

    When I try to initiialise the map from within an event script using the following 

    	var map = new myMaps.ol.Map({
 target: 'map',
 layers: [
 new ol.layer.Tile({
 source: new ol.source.OSM()
 })
 ],
 view: new ol.View({
 center: ol.proj.fromLonLat([37.41, 8.82]),
 zoom: 4
 })
 });

    I get the following colse error: 

    Unhandled exception running script Event sheet 1, event 17, action 2: TypeError: Cannot read properties of undefined (reading 'Map')

    If I remove the "myMaps." from "var map = new myMaps.ol.Map" in the above code then it works, but surely that is then not referring to the imported script?

  • To continue on from this, im still very confused...

    Im not sure if is because I come from a HTML, JS and PHP dev background where you can just include and call any JS library with ease, but why this isn't the same in C3 is very frustrating and disappointing.

    With C3 now having the vanilla HTML Element, and the already JS capabilities I feel we C3 is missing a trick in not being able to use the thousands of JS libraries already out there...

    For instance..

    I am trying to add Chartish JS library (a light weight single file charting library), just a JS file and CSS, in standard HTML works a treat.

    Add the files to C3 project, import the JS file inside "importForEvents" and I get a error on preview and the console states the following: 

    	Uncaught ReferenceError: global is not defined
 at chartist.min.js:8:9794
 at chartist.min.js:8:180
 at chartist.min.js:8:184
domSide.js:25 [C3 runtime] Failed to load JavaScript code used in events. Check all your JavaScript code has valid syntax.

    What has to be done to get this working? I have tried changing all ref of global inside the JS file to globalThis but no luck.

    If we could easily include all the readily available JS libraries the scope for lovely looking interfaces ETC is huge.

    Worker is also Off

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • It depends on the specific library. Until fairly recently there wasn't a language-standard way to access the global object or use modules in JavaScript. Construct is based on the modern approach of using JS Modules and globalThis for global access. Modern scripts that are based on modules should work fine. But older scripts may need tweaking to work.

    For example if an old script tries to declare a global variable with var myGlobal = ..., that will need changing to globalThis.myGlobal = .... Also if the script doesn't actually export anything, you won't be able to use it with an imported name - you'll have to rely on global variables.

  • It depends on the specific library. Until fairly recently there wasn't a language-standard way to access the global object or use modules in JavaScript. Construct is based on the modern approach of using JS Modules and globalThis for global access. Modern scripts that are based on modules should work fine. But older scripts may need tweaking to work.

    For example if an old script tries to declare a global variable with var myGlobal = ..., that will need changing to globalThis.myGlobal = .... Also if the script doesn't actually export anything, you won't be able to use it with an imported name - you'll have to rely on global variables.

    Thanks Ashley, I have given up on trying to get the Chartish JS library to work which is very disappointing, its not a old library and in fact quite modern and highly used but I cannot fathom why it gives the "global not defined error"...

  • It's probably because you need to replace 'global' with 'globalThis'. I'm only guessing though as I can't see the script you're talking about.

  • Thanks, and please don't think I'm being negative or not trying. But as noted in my original post, I have unfortunately already tried this.

    Thanks

    Andy

  • instead of loading the minified version try to load the regular version, in there you will be able to more easily verify where the error is coming from.

    It actually looks like the reference that fails is "this".

  • The section on using third-party scripts in the Construct for JavaScript developers quick start guide may be helpful. However it's difficult to provide any more specific help unless you share the specific project/code you're using.

  • Create a "Main Script"

    Set in proerties "Main Script"

    import all your JS files like this "firsts lines on main.js" 

    import * as Swal from "./sweetalert2.min.js";
import * as Bo from "./bootstrap.bundle.min.js";
import * as Jquery from "./jquery-3.6.0.min.js";
import * as Chart from "./chart.min.js";
Post reply
  • 9 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)