Material-UI 1.2.1 not working with Preact

[vinaybedre]

Hi,

Just create a default template preact-cli project, add material-ui and just use Button at https://material-ui.com/getting-started/usage/

An error is thrown: Material-UI: react@16.3.0 or greater is required

Error comes from the file https://github.com/mui-org/material-ui/blob/3353f440053222b4eed36f575593b5bfcfa7a0f3/packages/material-ui/src/ButtonBase/ButtonBase.js and line 48.

How can we make React.createContext?

Can you please help?

[developit]

Use an older version of material-UI for now. Adding fake API's to preact-compat isn't going to solve this issue for you, we need fundamental changes like fragments before we have proper React 16 compatibility.

[oliviertassinari]

We do the following in in order to check the support for getDerivedStateFromProps().

if (process.env.NODE_ENV !== 'production' && !React.createContext) {
  throw new Error('Material-UI: react@16.3.0 or greater is required.');
}

The source on Material-UI side

We can improve the detection logic if Preact support this hook.

[benwiley4000]

@developit is there an issue tracking the development of React.Fragment?

[Kanaye]

Yes there is developit/preact#946, developit/preact#1047 and a wip PR for fragements developit/preact#1080

[developit]

We just shipped getDerivedStateFromProps() in Preact 8.3.0. createContext() likely won't be coming to Preact core, we will need to integrate something like preact-context into compat (see #475).

[oliviertassinari]

@developit It's good to know! With the Fragment and Portal API, we should be able to make Material-UI work with Preact (we don't use the new context).

[ghost]

is there a workaround for this at the moment?

[oliviertassinari]

@coder82 We are planning on using the new context API of React. Things won't get any better.

[sriharrsha]

@oliviertassinari So what do u mean...will we not able to make preact-compat or inferno-compat work with Material-UI?

[oliviertassinari]

@sriharrsha It's going to be a large effort. This will be even more true after the hook migration.

[sriharrsha]

Yeah, Is there any other alternative UI Lib you would recommend for Preact

[oliviertassinari]

@sriharrsha I have never used Preact, I can't help with that.

[marvinhagemeister]

Just an FYI: That we will add hooks in a point release when they are marked as stable. Preact X adds Fragments so there's one less thing to be worried about.

[oliviertassinari]

@marvinhagemeister Great for the Fragment support 👍. I guess we only miss createContext() then.

[mnunes01]

Whats the current status on this? since preact X inplemented most features of hooks, are we able to use material ui with preactX?

[marvinhagemeister]

@mnues01 you should be able to use it just fine with Preact X. We're not aware of any issues with it and iirc some people in our slack channel are using it.

Just make sure to alias to preact/compat instead of the library in this repo.

Closing, because it's unlikely that we'll backport everything to 8.x.

[oliviertassinari]

Also, I would rather start with Material-UI v4 that was 100% rewritten with hooks than v1. v1 might rely on some legacy lifecycles and private context API, I'm not sure Preact v10 supports it. Starting with v4 is much safer.

You can find an example: https://github.com/mui-org/material-ui/tree/master/examples/preact.

[mnunes01]

yes i am using v4 and preact/compat it compiles, but i am having some issue with modal on Dialog component. any idea?

code:

....
//view render
    let children = Array()
    if (wait) {
        children = <div className={classes.progressContainer}><CircularProgress key='waitControl' size={80} thickness={5}/></div>
    } else {
        children = content
    }
    return (
        <Dialog
            className={classOverride}
            open={open}
            onClose={closeBringMoneyToTheTable.current}
            fullWidth={true}
            disableBackdropClick={true}
            disableEscapeKeyDown={true}
        >
            <DialogTitle className={classes.modalTitle}>{title}</DialogTitle>
            <DialogContent
                className={classes.mainValueContainer}
                children={children}
            />
        </Dialog>
    )

[oliviertassinari]

@mnunes01 Hum, it sounds like an issue with the ref triggers order. We might change ref the logic a bit in https://github.com/mui-org/material-ui/pull/16597. Could you try again when it land? Alternatively, if you want to dive into the problem, feel free to.

[mnunes01]

@oliviertassinari i guess it is indeed, going a bit deeper on it, it seems some async issue. if i do pause the debugger just before the if(!containerInfo.restore) the debugger shows containerInfo as undefined, but by the time it throws the error execption containerInfo is and object with the correct values.

before the error throw, breakpoint on line 356: