Dynamic import() of scrips in Power Pages
Tags: powerpages, javascript, powerapps
Published: 2024-03-11 14:47:09

*******************************
**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](https://learn.microsoft.com/en-us/power-pages/admin/enhanced-data-model). 

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m497mymt737xo809qukr.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfb668sbkeo01iehig5w.png)


*******************************
In [Power Pages](https://learn.microsoft.com/en-us/power-pages/introduction) portals you can attach any file as a [Web File](https://learn.microsoft.com/en-us/power-pages/configure/web-files) 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](https://carldesouza.com/restricting-attachment-types-in-dynamics-365/) for `.js` files and upload as a Note without renaming. Not recommended by Microsoft.

## Dynamic import()

Sometimes you may need to dynamically [import()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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](https://learn.microsoft.com/en-us/power-pages/configure/portal-management-app) 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.

![import() succedded](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pu6ly1ccq32ynsch9oj.png)

## 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](https://learn.microsoft.com/en-us/power-pages/configure/power-platform-cli-tutorial) 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`.