I want to use Material Ui for the front-end library.

[recervictory]

I want to use Material Ui for the front-end library. But it showing the error that @mui/utils library is not present. Normally with install npm install @mui/material @emotion/react @emotion/styled works for react project. So I added @mui/material @emotion/react @emotion/styled in the frontend library it doesn't work. Also, I added @mui/utils still getting the same error.

[Alek99]

Hi so you are trying to wrap material ui so you can use its components as seen here https://reflex.dev/docs/advanced-guide/wrapping-react. In your pcconfig the frontend imports are not working is that the problem?

[recervictory]

Hi so you are trying to wrap material ui so you can use its components as seen here https://pynecone.io/docs/advanced-guide/wrapping-react. In your pcconfig the frontend imports are not working is that the problem?

Correct. So I want to wrap simple Box Components from Mui, But Its showing the error

[Alek99]

Hi can you paste your code here and I can take a look and help debug. Also feel free to join the discord for faster response times

[recervictory]

This is the full error message

Unhandled Runtime Error
Error: Cannot find module '@mui/utils'

Call Stack
webpackMissingModule
webpack-internal:///./node_modules/@mui/material/styles/makeStyles.js (5:50)
eval
webpack-internal:///./node_modules/@mui/material/styles/makeStyles.js (5:135)
./node_modules/@mui/material/styles/makeStyles.js
file:///workspaces/pynecone/react_app/.web/.next/static/chunks/pages/index.js (6959:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///workspaces/pynecone/react_app/.web/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
webpack-internal:///./node_modules/@mui/material/styles/index.js (53:70)
./node_modules/@mui/material/styles/index.js
file:///workspaces/pynecone/react_app/.web/.next/static/chunks/pages/index.js (6948:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///workspaces/pynecone/react_app/.web/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
webpack-internal:///./node_modules/@mui/material/index.js (145:65)
./node_modules/@mui/material/index.js
file:///workspaces/pynecone/react_app/.web/.next/static/chunks/pages/index.js (6448:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///workspaces/pynecone/react_app/.web/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
webpack-internal:///./pages/index.js (20:72)
./pages/index.js
file:///workspaces/pynecone/react_app/.web/.next/static/chunks/pages/index.js (8780:1)
options.factory
/_next/static/chunks/webpack.js (661:31)
__webpack_require__
file:///workspaces/pynecone/react_app/.web/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (316:21)
eval
node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=%2Fworkspaces%2Fpynecone%2Freact_app%2F.web%2Fpages%2Findex.js&page=%2F! (5:15)
eval
node_modules/next/dist/client/route-loader.js (211:50)

This is my_app.py

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config

import pynecone as pc

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


class Box(pc.Component):
    library = "@mui/material"
    tag = "Box"
    
box = Box.create



def index():
    return pc.center(
        box()
        )
    

def about():
    return pc.text('About Page')



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

This is the pyconfig:

import pynecone as pc


config = pc.Config(
    app_name="react_app",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.DEV,
    frontend_packages=["@mui/material", "@emotion/react" , "@emotion/styled"],
)

[Alek99]

Ok nice will take a look in the morning in Pacific time zone so heading off for tonight

[Alek99]

Sorry got caught up with some other issues these past few days will take a look at this soon.

[recervictory]

Hey, can I join you as a contributor for this project?

[FHU-yezi]

Hey, I can I join you as a contributors for this project?

Yes we are open source project and welcome your contribution. Just make at least one PR, and you can got the contributor label automaticly.

[dapomeranz]

I did some testing here and I believe this issue was purely caused by OP mistakenly not adding @mui/utils as an additional library or maybe not resetting the application after adding it (as they said they tried).

I have successfully been able to use a few MUI components (code below).

Probably safe to close this and the other MUI linked ticket as there is no actual development to be done.

"""Welcome to Reflex! This file outlines the steps to create a basic app."""

from rxconfig import config

import reflex as rx

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


class Box(rx.Component):
    """Getting a little fancy with a custom component."""

    library = "@mui/material"
    tag = "Box"

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


class Rating(rx.Component):
    """Getting a little fancy with a custom component."""

    library = "@mui/material"
    tag = "Rating"


def index() -> rx.Component:
    """The app's index page."""
    return rx.center(
        rx.vstack(
            rx.heading("Welcome to Reflex!", size="9"),
            rx.text("Get started by editing ", rx.code(filename)),
            rx.button(
                "Check out our docs!",
                on_click=lambda: rx.redirect(docs_url),
                size="4",
            ),
            rx.markdown("# Hello, world!", align="center", font_size="4em"),
            Box(),
            Rating(),
            spacing="7",
        ),
        height="100vh",
    )


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

[masenf]

@dapomeranz thanks for helping us clean up some issues ✅