Material-UI implementation

[italodeandra]

trafficstars

Hi,

I'm currently trying to implement the usage of Material-UI.

Any component that I try to import and use throws me this error: TypeError: window.getComputedStyle is not a function. I checked the place where this error in thrown, and even though window exists, the getComputedStyle isn't defined. Maybe something related to SSR but I also tried disabling SSR and gave a totally different error.

Material-UI does work with SSR though. I have worked with Next.js and you can see an example here: mui-org/material-ui/blob/master/examples/nextjs

Any suggestions of what I could try?

Steps to reproduce

1. Create a new project using CLI init command
2. Add a Button to the index page:

import { Button } from "https://esm.sh/@material-ui/core";

<Button>Test</Button>

3. Error TypeError: window.getComputedStyle is not a function is thrown

[ije]

https://github.com/alephjs/aleph.js/blob/master/project.ts#L597 here we can implement a virtual getComputedStyle function for SSR.

[SuperManfred]

@italodeandra can you share how/if you got this working?

[italodeandra]

Hi @SuperManfred,

I dropped it. I ended up deciding on waiting for deno/aleph to become more mainstream before trying to implement something as I currently don't have time to contribute myself. Feel free to hijack my issue here or create another one yourself if you're going to keep researching further on this. It's a nice subject and I see there's more people interested based on the likes.

[noverby]

@SuperManfred @italodeandra I will take a look at implementing support for MUI in the weekend (or maybe before).

[SuperManfred]

Thanks... I'm about at that point too. In discord people say got it working, and antd and semantic ui, but I can't get any of it working. Wait and see

[vicasas]

https://github.com/alephjs/aleph.js/blob/master/project.ts#L597 here we can implement a virtual getComputedStyle function for SSR.

@ije Link is broken 😮

[noverby]

@SuperManfred You can disable SSR to experiment with alephjs:

// aleph.config.ts
export default (): Config => ({
  ssr: false
})