How to import js file to custom javascript

[joeyzy123]

Hi all,

I'm working on a powerapp task. My app has a 'Page' with a 'Web Form', it has 'Web Form Step' for sure. And I have some logics in the 'Web Form Step' -> 'Custom JavaScript'. 

Now I have an external .js file, which exports some functions I want to import to the 'Custom JavaScript'. I uploaded it to 'Web Files', and named the partial url 'myFileName.js'; I added '<script type="module" src="/myFileName.js"></script>' to 'Web Page' -> 'Content Page' -> 'Content' -> 'Copy (HTML)'.

Then if I added 'import { functionName } from "/myFileName.js";' to 'Web Form Step' -> 'Custom JavaScript', the page will lose all behaviors added by the custom js, so basically the custom js broke down by the 'import' part.

Any suggestion for this?

[chleverenz]

Hi @joeyzy123 ,

usually, i have a look in browserconsole first, whether there is really a problem. In most cases like this, i see (js) errors in the console and they are usually right.

Do you really need to import the module? I never tried, i always have a plain old js files and use the functions which are in there without any problems. 

In order to leave my personal "die hard" zone i tried also importing stuff recently which failed. The browser complaint(ed?), that the imports have to be on top of the file which is of course not possible in inline js.

May be you could as a workaround create another js fiels and import the functions/module there and use it afterwards.

Hope this points in a solution direction,

  Christian

[ragavanrajan]

Hi @joeyzy123 

Some of the workarounds which I am aware of without unblocking JS extensions. But for this scenario, you need to unblock the JS extension in advanced settings. 

In Portal management: 

1. Click Settings> Advanced Settings

2. Under Advanced > settings> System> Administration> System settings 

3. Remove JS under file extension attachments 

Once done go to the portal studio and sync config and try the web form step. 

Hope it helps. 
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

[joeyzy123]

Hi @chleverenz 
I have to create such a 'library' file because my custom js is reaching the character limits, I will not be able to add any new logic when it's over 10000.

I checked the browser console as you suggested,:
Uncaught SyntaxError: Cannot use import statement outside a module

So I guess the problem is not just the library .js should be a module, but the place where using 'import' should also be module, while 'custom javascript' is not?

[joeyzy123]

Hi @ragavanrajan 

I removed the block for .js file, but the browser console still complains about 'Uncaught SyntaxError: Cannot use import statement outside a module'

[OliverRodrigues · Accepted solution]

@joeyzy123 usually when importing JS I simply use:

<script src="/MYJS.js"></script>

I normally add that to the Tracking Code content snippet.. this way it's loaded on every page, but you can also do that at the page level

[joeyzy123]

Hi @OliverRodrigues 

Thanks! I actually tried this before but got error 'function not defined'. Tried again today and it works 😅, maybe I got some typo.

[Anonymous]

How do I upload a large js file to Web Files?

[OliverRodrigues]

You can change the file size from the System Settings - E-mail Tab @Anonymous 

System Settings Email tab - Power Platform | Microsoft Docs

[Anonymous]

How does email relate to Web Files?