Unable to render Material UI component

[n4rk0o]

Hello,

I'm new in web developments but familiar with Python and I'm interested in low code web app development and that's why I started to use Reflex.

I want to develop a simple dashboard with Material UI so I'm trying to implement basics components but I have an issue related to React I think.

PS: I installed package @mui/material with NPM before starting the app

• app.py:

"""Welcome to Reflex! This file outlines the steps to create a basic app."""
from rxconfig import config, Button

import reflex as rx

docs_url = "https://reflex.dev/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"

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

button = Button.create

def index() -> rx.Component:
    return rx.box(
        button()
    )

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

• rxconfig.py

from typing import Set
import reflex as rx

class AppConfig(rx.Config):
    pass

config = AppConfig(
    app_name="app",
    db_url="sqlite:///reflex.db",
    env=rx.Env.DEV,
    frontend_packages=[
        "@mui/material"
    ]
)

class Button(rx.Component):
    library = "@mui/material"
    tag = "Button"
    variant: rx.Var[str]

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

The application is starting correctly but the web page is returning this:

Server Error
TypeError: Cannot read properties of null (reading 'useContext')

This error happened while generating the page. Any console logs will be displayed in the terminal window.

I don't what I'm doing wrong to be honest and I'm here for help :)

• Python Version: 3.9
• Reflex Version: 0.2.3
• OS: Windows 11
• Browser (Optional): Chrome

[ElijahAhianyo]

possible duplicate of #419