cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
DanielZZ
Frequent Visitor

Unable to load external JS files async, wrong path probably

Hi,

 

I'm using the Scandit library and I've ran into a problem. The Scandit library requires  in the config to establish the path to the js and wasm files that will load asynchronously to work.

I put the files in the out/controls/ScanditComponent 
And the configuration simply "/"

 

That works on local in the harness, no problem there.

When I package the solution and import it and try it on a Canvas App, I get a 404 error for those 2 files.

I guess there should be a way to manage the path to the files dynamically, maybe with Webpack or something.

 

I've tried to import the files so that they're incorporated on the solution but the 'wasm' file gives an error that WebAssembly modules are not allowed and it must happen must happen asynchronous.

 

Using a CDN is no option either because the requirement is that this PCF component should be able to work offline.

 

Any help would be much appreciated 😄

Daniel

 

 

16 REPLIES 16

Dianas @DianaBirkelbach suggestion of adding the files as if they were css files in your ControlManifest is probably the best idea.  I also do the same thing for Font Awesome.

 

<resources>
      <css path="fonts/fa_solid_900.woff" order="2" />
      <css path="fonts/fa_solid_900.woff2" order="2" />
      <css path="fonts/fa_solid_900.ttf" order="2" />
</resources>

 

To make sure your component gets updated in the canvas app do the following.

 

Inside the Canvas App Editor.

* File -> Save -> Publish to make sure you have published your app

* File -> Close to complete close out your app in the editor. (* This is really important because the editor will never reload any changes unless you close and re-open the app.)

 

For your PCF Solution

* Increment the version attribute in the ControlManifest.Input.xml

* Increment the version property for the solution which imports the control.

* Import your solution with the component

 

Inside the Canvas App Editor.

*Open your app up again in the editor and you should be asked if you would like to upgrade the component. You can now test in the editor with your updated component.

*To make sure the app gets updated with your component updates make an arbitrary update to the app then do a File -> Save -> Publish to make sure you have published your app. (Note: Sometimes I don't see my changes reflected right away after publishing the app, i usually give it a minute or two and hit ctrl F5 a few times to do a full refresh.

 

 

Also just on a side note the best way i have found to then load your async javascript is by adding the script tag in your init and then doing an onload function to determine if it was loaded completely in the function that will utilize the script.

 

Add script during the init()

		let headerScript: HTMLScriptElement = document.createElement("script");
        headerScript.type = 'text/javascript';
		headerScript.id = "BingMapsHeaderScript";
		headerScript.async = true;
		headerScript.defer = true;
		headerScript.src=`https://www.bing.com/api/maps/mapcontrol?key=${apiKey}`;
		headerScript.onload = () => {
			this._bMapScriptIsLoaded = true;
		}
		
		this._container.appendChild(headerScript);

 

In the function which fire that utilizes the script you can use code like that below to ensure that the script was loaded. 

public initMap(){

		var self = this;
		if (!this._bMapScriptIsLoaded) {			
			setTimeout(() => {self.initMap()}, 1000);
			return;
		}		
...
}

 

 

--Rick

Hi @DianaBirkelbach,

 

I agree, it goes beyond the purpose of PFC design.

 

I think I will try better with the CDN as @ben-thompson suggested, but try to and some service workers to ensure the request and caching of the files for offline use.

 

I'm guessing I can use service workers in the PCF and the CanvasApp, right?

 

Thanks to both so much

Hi Rick @RAWilson 

 

Thank you for that detailed answer. I think that's the best way, load myself the files and catch them for later use with some service workers. 

 

About the updating problem, I've been doing exactly as you said except for this step:
>> Increment the version property for the solution which imports the control. 

Where is that version property? I didn't know about it, perhaps that is why I'm  having this problem because since yesterday I can't get it to update.

 

Thank you again

The version is in the control element of the ControlManifest.input.xml file

 

<control namespace="hdn" constructor="SelectEntity" version="1.0.1" ...

 

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

Hi Ben @ben-thompson 

 

Yes, that one I'm updating to no effect. Just found the "Solution Settings" and the version there, but still no update.

I feel a bit like there would a limited number of updates. 

In the image I where I found the Solution version.

Hi @DanielZZ Have you tried to delete the solution and try again, just to see if you get the right content if it's fresh installed?

Maybe the problem is somewhere else...

Best regards,

Diana

 

@DanielZZ  There should be a solution.xml file somewhere in your solution.  Once you find it update the version there too before you do your build and deploy.

 

solutionxml.png

 

To keep from having to do the versioning manually i really like using the PCF Custom Control Builder in the Xrm Toolbox for my projects.  Danish Naglekar did a great job building it and it auto increments your version for your.

 

xrmtoolbox-pcf.png

 

--Rick

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (2,225)