kt3k / packup

📦 Zero-config web application packager for Deno
https://packup.deno.dev/
MIT License
327 stars 18 forks source link

null rendered into the bundle when bundling a @mui/lab/TreeView component #51

Open dagda1 opened 1 year ago

dagda1 commented 1 year ago

Describe the bug A clear and concise description of what the bug is.

I encountered a weird bug when trying to render a @mui/lab/TreeView component.

When packup is bundling the assets, the error below happens

aaa

If I use vite to bundle then the error goes away.

To Reproduce Steps to reproduce the behavior:

  1. I created this repo with reproduction and proof that it works with vite
  2. There are instructions in the README and below
  3. Clone the repo
  4. deno task build
  5. deno task dev --app-path=./dist

Expected behavior A clear and concise description of what you expected to

It should run without errors

Screenshots If applicable, add screenshots to help explain your problem.

aaa
N8Brooks commented 1 year ago

Doesn't seem to be an issue with set-up as follows. Having trouble with the styling though.

import * as React from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import {
  AppBar,
  Box,
  Button,
  Container,
  createTheme,
  CssBaseline,
  IconButton,
  ThemeProvider,
  Toolbar,
  Typography,
  useMediaQuery,
} from "https://esm.sh/@mui/material@5.11.15";
import {} from "https://esm.sh/@emotion/react@11.10.6";
import {} from "https://esm.sh/@emotion/styled@11.10.6";
import MenuIcon from "https://esm.sh/@mui/icons-material@5.11.11/Menu";

function App() {
  const isDarkModePreferred = useMediaQuery("(prefers-color-scheme: dark)");
  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode: isDarkModePreferred ? "dark" : "light",
        },
      }),
    [isDarkModePreferred],
  );
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position="static">
          <Toolbar>
            <IconButton
              size="large"
              edge="start"
              color="inherit"
              aria-label="menu"
              sx={{ mr: 2 }}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              News
            </Typography>
            <Button color="inherit">Login</Button>
          </Toolbar>
        </AppBar>
        <Container component="main">
          <Typography variant="h1">News</Typography>
        </Container>
      </Box>
    </ThemeProvider>
  );
}

createRoot(document.querySelector("body")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);