Unable to load external JS files.

[navneet_singh]

I have an external JS file that contains the logic to be triggered when a button is clicked. I want to invoke a function which is present in my external JS file.

I tried to import the file using import "..." statement. But it was throwing the following error to me:

Cannot find name 'compareURLfunction'.

To fix this, I tries to include the js file in my xml file under <resources>

<resources>

      <code path="index.ts" order="1"/>

      <css path="css/detailsButton.css" order="1"/>

      <js path="DomainNameExtraction.js" order="1"/>

    </resources>

This was also throwing the following error:

Manifest validation error: instance.manifest.control[0].resources[0] additionalProperty "js" exists in instance when not allowed

How can I fix this issue? @HemantG  @JMu @jopursle 

[ben-thompson · Accepted solution]

You need to rewrite your Javascript and move it to within the index.ts typescript file or create a separate typescript library and call it from within the index.ts file.

Separate Javascript files will not work because a PCF component is a typescript file that is converted to javascript as the PCF component is built, so your JS file is just ignored.

[navneet_singh]

Thank you for your firm reply. I'll look into it.

[rexkenley]

You can use the import statement to bring your "separate" js file into the index.ts.

Here is an example.

https://github.com/rexkenley/d365DatetimeBox/blob/master/DatetimeBox/index.ts