Unable to load external JS files async, wrong path probably

[DanielZZ]

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

[ben-thompson]

/ 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.

[DanielZZ]

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?

[DianaBirkelbach]

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

[DanielZZ]

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'

[DianaBirkelbach]

@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

[ben-thompson]

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.

[DanielZZ]

@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

[DanielZZ]

@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!

[DianaBirkelbach]

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