Answered

Unable to load external JS files.

(0) Share

Report

Posted on by 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>

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

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (5)

Answers (1)

Sort by

Verified answer

Ben Thompson 1,400 on at

Like (2)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
navneet_singh 13 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
rexkenley 203 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
rexkenley 203 on at

Like (0)

Report
Copy link

Link copied!

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

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

Was this reply helpful? Yes No