[vite] Uncaught ReferenceError: useForkRef_default is not defined

[Roy-Kid]

• [ x] The issue is present in the latest release.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I want to add an accordion. I try simpleDrawer in the example, but one error raises:

My code is:

and the component SimpleAccordion is directly copied from example: https://material-ui.com/zh/components/accordion/

I'm new to the frontend so I don't know what's going wrong.
Thanks in advance!

Expected Behavior 🤔

PS: I want to use the accordion in the Drawer, to implement the effect like this:

is it possible?

[oliviertassinari]

@Roy-Kid Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[Roy-Kid]

@oliviertassinari Thanks for your help!

I use vite(with react template) to generate the project and use its own dev server.

Here is the main.jsx code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import TabBar from './tabBar';
import Visualization from "./visualization";
import SimpleAccordion from './taskPanel';

ReactDOM.render(
  <React.StrictMode>

    <SimpleAccordion />
    
  </React.StrictMode>,
  document.getElementById('root')
)

and the <SimpleAccordion/> is directly copied from official code:

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular,
  },
}));

export default function SimpleAccordion() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography className={classes.heading}>Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3a-content"
          id="panel3a-header"
        >
          <Typography className={classes.heading}>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>
  );
}

and then run the npm run dev, in the chrome debug panel the error raise.
This the repo that the error raise. I am so sorry that I have no experiment to frontend and no friend to ask. Thanks again for your help !!!
https://github.com/Roy-Kid/molvis/tree/vitedev

[oliviertassinari]

It looks like an issue with vite. Did you try using Material-UI v5 as well?

[Roy-Kid]

I'm going to a meeting. After I'll try create-react-app and v5 when I get back. Thanks for your kindly help!

[Roy-Kid]

First, I port v4 to v5 but not fix the problem. Then I use code sandbox it works. I pretty sure that is an issue with vite.

Can I use create-react-app to replace with vite?

[oliviertassinari]

@Roy-Kid You can switch, but I think that it would be better for us to make sure it works with Vite! It's popular: https://bestofjs.org/projects/vite.

[Roy-Kid]

Hi, I am so glad to help the community. If you need anything, please say so. I need a lot of learning to contribute to the community

[oliviertassinari]

@Roy-Kid Ok, I had a look. I could reproduce the issue with the latest versions (v5). It's an issue with the icons package. This fixes the issue: #21377 (comment).

If you want to add a new /examples in our repo with vite, feel free too.