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  @Anonymous @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

[edhalsim]

Hi.  Could you please provide more details?  It looks like you're using React to load your datetimebox control.  I'm not familiar with React.  I have a JavaScript based editor control that has numerous supporting files that I'd like to "wrap" in a PCF component.  I can create a folder for the .js file and all supporting files, but how do all of them get bundled up with the component?  Thanks for your help.

[rexkenley]

Webpack does that part by using es6 modules. Webpack is a "module bundler".

https://webpack.js.org/api/module-methods/#es6-recommended