cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
Highlighted
Solution Sage
Solution Sage

Re: Unable to load external JS files async, wrong path probably

/ gives you a path that starts at the root directory of the server, ./ (i.e. a dot or full stop before the slash) gives you a path that is relative to the component that called it and the root directory of the harness is not going to be the same as the root directory on a server so you really need to use a relative path and I suspect ./ will be enough.

 

A CDN may also actually work as a lot of items are cached for speed and offline performs. If the relative paths solution above doesn't fix it don't rule out using a CDN without testing it.

 

 

---
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".
Highlighted
Frequent Visitor

Re: Unable to load external JS files async, wrong path probably

Thanks for the reply @ben-thompson

 

With the CDN it does work, but the offline functionality is not 100% reliable and is an important requirement.

 

I forgot to mention I already tried './', or putting it in a folder like './scanditEngine' and simply 'scanditEngine' but to no avail.

The other detail is that I'm inserting this PCF component into a CanvasApp and for some reason it seems that the bundle.js is being served from a blob, so my guess is that any file system is just gone...

 

I'm attaching an image of the console.log error

 

The url ./scanditEngine/ is correct but the response is a 404

 

Any suggestions?

Highlighted
Super User
Super User

Re: Unable to load external JS files async, wrong path probably

Hi @DanielZZ 

Have you tried to declare the files in your manifest, in order to be able to access them using the relative path?

Best regards,

Diana

Highlighted
Frequent Visitor

Re: Unable to load external JS files async, wrong path probably

Hi @DianaBirkelbach 

 

I tried, but one is JS not TS and the other is a wasm (WebAssembly Binary File) so no chance there.
I guess calling them async is the way to go in this situations, but I want to call them from 'inside the solution package'

Highlighted
Super User
Super User

Re: Unable to load external JS files async, wrong path probably

@DanielZZ 

My bad, you cannot declare the js in the manifest.

You could load the js inside your index.ts file using 

import "./YourFile.js"; 

but maybe you don't want to have everything included in your bundle.js...

I also have no Idea how to declare the wasm file in the manifest.

Maybe trying to force one of the available resource types (css, img, html or resx), but setting the url to your wasm file? 

I've did something similar, by defining some font-awesome files (.ttf, .woff....) as "css" in my manifest, but that could be a different case.

Best regards,

Diana

Highlighted
Solution Sage
Solution Sage

Re: Unable to load external JS files async, wrong path probably

Not that this will help but when you decide to build a release version of the component any javascript / typescript files added as an include within the index.ts file will be merged into a single file for production use.

---
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".
Highlighted
Frequent Visitor

Re: Unable to load external JS files async, wrong path probably

@DianaBirkelbach 

Yes, I don't want the files in the bundle, because I do not control the script calling them.

The idea to include the wasm in the manifest as a file different than code sounds good, but that would include it in the bundle right?

I'm trying to give it a try, but now it just seems that I just can update the component in the CanvasApp. Do you know any tricks for that?

I'm building, msbuild -t:restore, then msbuild. Upload, publish all customization on the upload window, I do it again directly in the solution package of the PCF. 
When I go to the CanvasApp it asks me, not always, if I wan to update. I click yes, but it's still the same. I'm putting a version number in the PCF so I can visually know immediately.

 

Thnaks for all your help

Highlighted
Frequent Visitor

Re: Unable to load external JS files async, wrong path probably

@ben-thompson 

 

In webpack there is the chuking of the bundle, so you don't have one big file.

Do you think it could be possible to do it here and make this extra 2 files 2 chunks?

 

Thanks!

Highlighted
Super User
Super User

Re: Unable to load external JS files async, wrong path probably

Hi @DanielZZ 

In order to update your PCF Control, you need to increase the version in the manifest.

Alternatively, you could use pac pcf push -pp <prefix> to upload it directly in a debug solution in your system; then you don't need to use msbuild and import the solution manually.

The js files cannot be declared in the manifest, you need to use "import" in your index.ts file. But not every "js" works this way.

The files like css, resx, html are not bundled, so that might be your chance with the "wasm" file, but I think it's going beyond the purpose of PCF design. 

Best regards,

Diana

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Tech Marathon

Maratón de Soluciones de Negocio Microsoft

Una semana de contenido con +100 sesiones educativas, consultorios, +10 workshops Premium, Hackaton, EXPO, Networking Hall y mucho más!

Users online (6,460)