Dynamic import() of scrips in Power Pages

UPDATE as of 25.06.2024

Web Files functionality in Power Pages is now changed. When provisioning a new environment and a new power pages site these days, all new sites will be created by default using the enhanced data model, as explained here.

Now, in the Web Files tab files can be uploaded as attachment and not as a Note. Therefore, the technique described below will not work.

These files now sit in the 'fileattachments' table and not 'annotations' as before. It's not possible to patch/update any metadata in the 'fileattachments' table.

To upload a script file, you would need to enable 'js' extension in Power Platform admin center -> Environments -> select your environment -> Settings -> Resources -> All legacy settings -> Administration -> System Settings -> General -> Set blocked file extensions for attachments -> Find 'js;' in the list, delete and save.

Once uploaded, the 'js;' extension can be added again in the 'Set blocked file extensions for attachments' settings if required.

If you upload script_js instead of script.js as described below, mime type of js file will be 'application/octet-stream', which will not allow dynamic import.

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.