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.