Include js file without npm/ module loader

[mroot]

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

[dm-p]

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

[mroot]

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-

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

Apprciate your time/ help.

Matt

[dm-p · 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