reflex icon indicating copy to clipboard operation
reflex copied to clipboard

Published 20 hours ago • verified publisher icon reflex-dev

Wrapping React MUI Import Error

Open Alek99 opened this issue 1 year ago • 2 comments 

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
import pynecone as pc

class TextField(pc.Component):
    library = "@mui/material"
    tag = "TextField"

    id: pc.Var[str]
    label: pc.Var[str]
    variant: pc.Var[str]

    @classmethod
    def get_triggers(cls):
        return super().get_triggers() | {"on_change"}

text_field = TextField.create

class State(pc.State):
    """The app state."""

def index():
    """The main view."""
    return pc.box(
         text_field(pc.input(),id='standard-basic', label='Standard', variant='standard')
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

import pynecone as pc


config = pc.Config(
    app_name="example",
    bun_path="$HOME/.bun/bin/bun",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.DEV,
    frontend_packages=["react-copy-to-clipboard","@mui/material"]
)

This seems to compile the right output

<TextField variant="standard"
label="Standard"
id="standard-basic"/>

But we are getting this error

Server Error
TypeError: Cannot read properties of undefined (reading 'create')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/alekpetuskey/Desktop/pynecone/examples/pynecone-examples/nba/.web/node_modules/@mui/material/node/InputLabel/InputLabel.js (77:33)

OS: Mac PC version: 0.1.14 Python Version 3.11

Alek99 avatar Feb 01 '23 06:02 Alek99

Tried this with reflex == 0.2.0 and got the following traceback, after running bun run dev myself

TypeError: Cannot read properties of undefined (reading 'create')
    at /Users/masen/code/pynecone-io/repro-419/.web/node_modules/@mui/material/node/InputLabel/InputLabel.js:77:33
    at transformedStyleArg (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/@mui/system/createStyled.js:199:40)
    at handleInterpolation (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:149:24)
    at Object.serializeStyles (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:274:15)
    at /Users/masen/code/pynecone-io/repro-419/.web/node_modules/@emotion/styled/base/dist/emotion-styled-base.cjs.dev.js:167:34
    at /Users/masen/code/pynecone-io/repro-419/.web/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:85:16
    at renderWithHooks (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderForwardRef (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderForwardRef (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
- error Error [TypeError]: Cannot read properties of undefined (reading 'create')
    at /Users/masen/code/pynecone-io/repro-419/.web/node_modules/@mui/material/node/InputLabel/InputLabel.js:77:33
    at transformedStyleArg (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/@mui/system/createStyled.js:199:40)
    at handleInterpolation (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:149:24)
    at Object.serializeStyles (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:274:15)
    at /Users/masen/code/pynecone-io/repro-419/.web/node_modules/@emotion/styled/base/dist/emotion-styled-base.cjs.dev.js:167:34
    at /Users/masen/code/pynecone-io/repro-419/.web/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:85:16
    at renderWithHooks (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderForwardRef (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderForwardRef (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderElement (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/masen/code/pynecone-io/repro-419/.web/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) {
  digest: undefined

masenf avatar Jul 07 '23 00:07 masenf

and the line of code where create is coming from

!ownerState.disableAnimation && {
  transition: theme.transitions.create(['color', 'transform', 'max-width'], {
    duration: theme.transitions.duration.shorter,
    easing: theme.transitions.easing.easeOut
  })

so it looks like something to do with how the theming interacts with these components, maybe we need to initialize something first? i haven't worked with MUI much, but just digging in a bit, there's definitely something missing.

Reflex version of the code snippet, for posterity

"""Welcome to Reflex! This file outlines the steps to create a basic app."""
from typing import Set

import reflex as rx

class TextField(rx.Component):
    library = "@mui/material"
    tag = "TextField"

    id: rx.Var[str]
    label: rx.Var[str]
    variant: rx.Var[str]

    def get_triggers(self) -> Set[str]:
        return super().get_triggers() | {"on_change"}

text_field = TextField.create

class State(rx.State):
    """The app state."""

def index():
    """The main view."""
    return rx.box(
         text_field(rx.input(),id=rx.Var.create('standard-basic'), label='Standard', variant='standard')
    )


# Add state and page to the app.
app = rx.App(state=State)
app.add_page(index)
app.compile()

masenf avatar Jul 07 '23 00:07 masenf

linked to #378

ElijahAhianyo avatar Aug 18 '23 11:08 ElijahAhianyo

Its a missing dependency issue, fixed if rxconfig.py param: frontend_packages=[], matches the suggested npm install packages. Looks like when reflex is wrapping, it needs additional conditionals to check for missing packages, then, maybe something like raise Exception('Missing packages: whatever whatever').

https://www.npmjs.com/package/@mui/material npm install @mui/material @emotion/react @emotion/styled

solutuion in rxconfig.py:

frontend_packages=[ "@mui/material", "@emotion/react", "@emotion/styled", ],

cheekybastard avatar Sep 24 '23 06:09 cheekybastard

Its a missing dependency issue

Thanks for the pointer! 🤩

Full, working example for reflex 0.2.8

from typing import Any

import reflex as rx


class MaterialUIComponent(rx.Component):
    library = "@mui/material"

    lib_dependencies: list[str] = [
        "@emotion/react",
        "@emotion/styled",
    ]

    variant: rx.Var[str]
    size: rx.Var[str]
    color: rx.Var[str]


class TextField(MaterialUIComponent):
    tag = "TextField"

    label: rx.Var[str]
    value: rx.Var[str]

    def get_event_triggers(self) -> dict[str, Any]:
        return {
            **super().get_event_triggers(),
            "on_change": lambda _e: [_e.target.value],
        }


class Button(MaterialUIComponent):
    tag = "Button"


text_field = TextField.create
button = Button.create


class State(rx.State):
    val: str = ""


def index():
    return rx.vstack(
        rx.heading(State.val),
        text_field(
            label='A Text Field',
            variant='standard',
            value=State.val,
            on_change=State.set_val,
        ),
        rx.hstack(
            button("Submit", variant="outlined", color="success", on_click=rx.window_alert(State.val)),
            button("Clear", variant="outlined", color="error", on_click=lambda: State.set_val("")),
        ),
    )


app = rx.App()
app.add_page(index)
app.compile()

@Alek99 i think we can close this one now?

masenf avatar Sep 24 '23 06:09 masenf