Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Grow your Fabric skills and prepare for the DP-600 certification exam by completing the latest Microsoft Fabric challenge.

Reply
mroot
Frequent Visitor

Include js file without npm/ module loader

Hi Everyone,

 

Is there anyway I can load a single js file in my custom visual without going through npm and module loader?

 

Trying to use "files" property under tsconfig.json instead of pbiviz.json, and referencing that js file with something like 'require' or 'include'.

 

Any help would be appreciated!

 

Thanks,

 

Matt

1 ACCEPTED SOLUTION

Hi @mroot, and thanks for providing more info.

If you're installing requireJS via NPM, then it definitely means it's supported in Node.js. The challenge is that NPM packages don't necessairly support each other; just that they support running on Node.js. Both TypeScript and the custom visuals SDK are also NPM packages and there may be some challenges around using them in conjunction with requireJS. I've personally never tried, as I've always written or ported JS code into TS in the past, as I like the advantages the tooling gives me.

From your screenshot, it looks like the SDK tooling might not be readily geared for this approach, or there's possibly some further configuration of WebPack needed within your project to build it in.

If you're able to share your JS file, I can see if I can find a solution, but it might require some dedicated support from the custom visuals team if there's no simple way to do it and re-writing the JS is not an option. They can be reached at pbicvsupport@microsoft.com if you want to give them a try, particularly if you'd rather keep the code private, and as they author the tooling they'd probably be the quicker avenue for platform-specific issues.

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

3 REPLIES 3
dm-p
Super User
Super User

Hi @mroot,

Normally, you'd write your JS up as TypeScript and then import it as another file in your project where needed. Are you writing the JS yourself, or trying to import someone else's they you'd rather not re-write? If the former then it's probably easier to add the necessary exports to the file so that it can be included as normal.

Which version of the custom visuals SDK are you using? If not sure, you can run the following from your project's root folder:

pbiviz --version

If you're on 3.x then you don't need to add it to the tsconfig.json file and you'll want to write your file using ES6 syntax and importing it into any files that need it. If you want to see how this might be done, the sample bar chart illustrates how this works - here's an import for the objectEnumerationUtility.ts file, which is local to the project.

If you want to see how it's done in earlier verisons, then the master branch of that project has the tsconfig.json and visual.ts / objectEnumerationUtility.ts you can refer to for reference.

Does this answer your question? If not, then if you can provide some more info, we'll see if we can get to the bottom of what you're trying to do.

Good luck!

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




mroot
Frequent Visitor

Hi @dm-p ,

I appreciate your support.  I don't want to recode it in typescript.  Bascially I want to use requireJS to load my javascript file instead of commonJs within my custom visual.  I'm thinking you can use requireJS in Node.js?  

These were my steps:

 

1) I installed requireJs in my custom visual project-

npm install requirejs

 

2) Imported requireJs in my custom visual-

import * as require  from "requirejs";

 

3) Attempted to load my javascript file using requireJS-

var myFile = require('path to my file');

I am getting the following error when compiling-

ErrorPicture.PNG

Can this be done? Any thoughts on what I am doing wrong?

Apprciate your time/ help.

 

Matt

Hi @mroot, and thanks for providing more info.

If you're installing requireJS via NPM, then it definitely means it's supported in Node.js. The challenge is that NPM packages don't necessairly support each other; just that they support running on Node.js. Both TypeScript and the custom visuals SDK are also NPM packages and there may be some challenges around using them in conjunction with requireJS. I've personally never tried, as I've always written or ported JS code into TS in the past, as I like the advantages the tooling gives me.

From your screenshot, it looks like the SDK tooling might not be readily geared for this approach, or there's possibly some further configuration of WebPack needed within your project to build it in.

If you're able to share your JS file, I can see if I can find a solution, but it might require some dedicated support from the custom visuals team if there's no simple way to do it and re-writing the JS is not an option. They can be reached at pbicvsupport@microsoft.com if you want to give them a try, particularly if you'd rather keep the code private, and as they author the tooling they'd probably be the quicker avenue for platform-specific issues.

Regards,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

Power BI Carousel June 2024

Power BI Monthly Update - June 2024

Check out the June 2024 Power BI update to learn about new features.

RTI Forums Carousel3

New forum boards available in Real-Time Intelligence.

Ask questions in Eventhouse and KQL, Eventstream, and Reflex.

Top Solution Authors