cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
navneet_singh
Frequent Visitor

Unable to load external JS files.

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 
1 ACCEPTED SOLUTION

Accepted Solutions
ben-thompson
Memorable Member
Memorable Member

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.

 

 

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

View solution in original post

5 REPLIES 5
ben-thompson
Memorable Member
Memorable Member

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.

 

 

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

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

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

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.

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

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

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Users online (15,479)