reflex
reflex copied to clipboard
Wrapping React MUI Import Error
"""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
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
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()
linked to #378
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", ],
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?