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

Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.

Reply
callum
Helper II
Helper II

External library only accessible with <any>window

Hello,

I'm sorry to ask such a common question... however this has been bugging me for hours! I'm doing all this in a brand new project so it's a clean slate.

I'd like to use the tinycolor JS library in my project. The only things I've done since creating the new project are:

1. Ran "npm install --save tinycolor2 @types/tinycolor2
2. Added "node_modules/@types/tinycolor2/index.d.ts" to the "files" section of tsconfig.json
3. Added "node_modules/tinycolor2/tinycolor.js" to the "externalJS" section of pbiviz.json
4. Added the line console.log(tinycolor("red")); console.log(true); at the top of the visual's update method.

 

However, this causes the update method to just stop executing after the first line (this was the reason for console.log(true), to pinpoint where it stops executing). Strangely, no error is logged or anything - but something is clearly going wrong to stop the rest of the method executing.

If I change tinycolor("red") to (<any>window).tinycolor("red") then it logs a tinycolor instance, followed by true... as desired.

This isn't expected behaviour, right?

 

I can get around this by adding let tinycolor = (<any>window).tinycolor; at the top of my visual's module, and then the first example works... but surely there's no way that's the intended method of doing this?

As I said, this is happening on a blank project, so you can copy my steps and see for yourself.

What am I doing wrong? I've followed everything in the guide here.

Thanks

1 ACCEPTED SOLUTION
v-chuncz-msft
Community Support
Community Support

@callum,

 

Based on my research, you could add statement below to tinycolor.js.

this.tinycolor = tinycolor;
Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

View solution in original post

1 REPLY 1
v-chuncz-msft
Community Support
Community Support

@callum,

 

Based on my research, you could add statement below to tinycolor.js.

this.tinycolor = tinycolor;
Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
Microsoft Fabric Learn Together

Microsoft Fabric Learn Together

Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City

PBI_APRIL_CAROUSEL1

Power BI Monthly Update - April 2024

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

April Fabric Community Update

Fabric Community Update - April 2024

Find out what's new and trending in the Fabric Community.