preactjs / preact-compat

ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
http://npm.im/preact-compat
MIT License
949 stars 148 forks source link

Unable to use Material-UI with preact #465

Closed id0Sch closed 6 years ago

id0Sch commented 6 years ago

Hi, first off this is a great lib and I tend to use it whenever I use react! however, I ran into this issue when building my app using the new material-ui. my app is the following

render(<MuiThemeProvider theme={muiTheme}>
  <h1>here</h1>
</MuiThemeProvider>, document.body)

but is rendered as image The issue is that in order to use themes the usage of the "MuiThemeProvider" is needed, when debugging it I noticed that the provider's render method is:

 render() {
    return this.props.children;
  }

code here: https://github.com/mui-org/material-ui/blob/v1-beta/src/styles/MuiThemeProvider.js when I monkey-patched it to return this.props.children[0] it worked, how can this issue be resolved?

this is my package json

    "preact": "^8.2.7",
    "preact-compat": "^3.18.0",
    "preact-slots": "^1.0.0",
    "react": "preact-compat/react",
    "react-credit-cards": "^0.7.0",
    "react-dom": "preact-compat/react-dom",
    "react-dom-confetti": "^0.0.8",
    "react-router-dom": "^4.2.2",

and alias section in webpack:

alias: {
        'react': 'preact-compat',
        'react-dom': 'preact-compat',

I noticed that there were several issues regarding children but I couldn't find any solution that fixed my problem, If there's anything I can help with regarding this issue let me know Thanks!

Edit: is seems that the issue is with uglifyjs-webpack-plugin, I'm trying to figure out which option is messing with it... Edit2:https://github.com/developit/preact/issues/961 solution was to set

uglifyOptions: {
          compress: {
            reduce_vars: false,

and it worked!