Dynamic import() of scrips in Power Pages

In Power Pages portals you can attach any file as a Web File with the exception of multiple extensions blocked by default, including javascript files.

There are 2 possible workarounds to attach a .js file:

1. Rename a file from app.js to app_js and upload as a Note to a Web File. This is how I do it in my project.
2. Remove block for .js files and upload as a Note without renaming. Not recommended by Microsoft.

Dynamic import()

Sometimes you may need to dynamically import() a javascript file/module to a Power Pages portal. You can do this from any script tag or js file in your portal, or even from a console in a browser.

For example, in my project I have a javascript file with path /get-user-roles.js which is attached to a Web File as a Note with name get-user-roles_js. But calling import('/get-user-roles.js' returns the following error:

Failed to load module script: Expected a JavaScript module script but the server responded with a Mime Type of "application/octet-stream". Strict Mime Type checking is enforced for module scripts per HTML spec.

This happens due to the file get-user-roles_js having Mime Type application/octet-stream instead of text/javascript. And it's not possible in the Power Pages Portal Management app to set a Mime Type of Notes of Web Files.

Solution

Go to make.powerapps.com => Solutions => Standard Solution (Default) and search for Note in Objects. Note table keeps metadata of all your attached files (Notes), column Mime Type is editable. Rename Mime Type to text/javascript for all js files you want import dynamically, and you are good to go.

Update May 2024

I noticed that MIME type of some files are set back to application/octet-stream after I updated manually the Note table.

I found out that this is pushed back when I upload the code with the Power Platform CLI through VSCode's terminal.

The thing is that all files in the downloaded portal folder have a .yml file with some metadata. One of the fields is called mimetype, so if using CLI just set this field to mimetype: text/javascript.