Instructure UI components inside of Canvas

[AustinKP]

Question

Is it possible to use instructure's UI react components within instructure's canvas itself? I'm trying to build a custom module that hooks into canvas but uses some of the existing canvas components from this library in my custom module if possible but I receive this error:

Note: I actually am able to see the components render but I'm receiving a ton of that error above

[HerrTopi]

Hi! Could you provide more information on what you are trying to achieve and with what code?

[AustinKP]

@HerrTopi Hey there! Basically, we have custom JS that hooks into canvas to provide custom functionality. The goal is to use some of the components from this library in our custom code. I'm just wrapping our App component with the provider as mentioned in the documentation and then I have a button component from this library. While this does render correctly our console is full of max call stack errors. I'm curious if anyone has used any of these components within canvas itself (custom module)

[OrchidForever]

@HerrTopi Happy Wednesday!

I looked into the issue more with @AustinKP and it looks like the issue with the package ui-dom-utils. Pointedly one function in particular, getComputedStyle.

Our react code is injected into canvas and cavas-lms uses jQuery who calls on the Window object getComputedStyle. The function from from this file getComputedStyle.ts is picked up instead. This causes a huge loop within the webpage.

I'm not sure 100% what the correct solution would be as I don't know the history of why some of the utils in ui-dom-utils exists.

I had tried locally modifying the code in the repo and just removing getComputedStyle.ts and changing the references to Window.prototype.getComputedStyle and it worked in a very limited test. But so far in canvas, this seemed to be the only function jQuery didn't play well with.

[matyasf]

hi! Sorry for the late reply.

I'm pretty sure that InstUI will break if you remove its getComputedStyle function. Its really strange that this function is picked up instead, we do not put it on the window object. We do not put anything on global objects like window, I have checked for getComputedStyle and we're not doing this.

I have 2 guesses:

1. Some build tooling is messing it up when you compile your app.
2. There is some code in your part that puts this to the window object

[balzss]

@AustinKP @OrchidForever do you have any updates on this? were you able to solve this and if not, is this still relevant? thanks