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 😄
/ 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.
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
Have you tried to declare the files in your manifest, in order to be able to access them using the relative path?
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'
My bad, you cannot declare the js in the manifest.
You could load the js inside your index.ts file using
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.
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
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?
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.
Check out new user group experience and if you are a leader please create your group
Please join us on Wednesday, July 21st at 8a PDT. We will be announcing the Winners of the Demo Extravaganza!
Participate in the Power Virtual Agents Community Challenge
Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.