Can't resolve 'react-transition-group' in MUI IconButton-CodePudding

This error

./node_modules/@mui/material/ButtonBase/TouchRipple.js
Module not found: Can't resolve 'react-transition-group' in '#/node_modules/@mui/material/ButtonBase'

keeps persisting although followed instructions and ran npm install react-transition-group. Additionally, tried refreshing modules with rm -rf node_modules && rm -f package-lock.json && npm cache clean --force && npm install but nothing's changed.

This is the App.js. I have marked with a comment where the error happens. With trial and error, I found out it fails to compile even if the component is not used. The import is enough to cause it to fail.


    import React from "react";
    import AppBar from '@mui/material/AppBar';
    import Box from '@mui/material/Box';
    import Toolbar from '@mui/material/Toolbar';
    import IconButton from '@mui/material/IconButton';
    import Typography from '@mui/material/Typography';
    import Container from '@mui/material/Container';
    
    const App = () => {
      return(
        <div>
          <AppBar position="static">
            <Container maxWidth="x1">
              <Toolbar disableGutters>
                <Typography>Henlo worl</Typography>
                <Box>
                  <IconButton> {/*<-- adding this causes the error*/}
                    Whatever
                  </IconButton>
                </Box>
              </Toolbar>
            </Container>
          </AppBar>
        </div>
      );
    }
    
    export default App;

Here's my package.json


    {
      ...
      "dependencies": {
        "@emotion/react": "^11.9.3",
        "@emotion/styled": "^11.9.3",
        "@mui/icons-material": "^5.8.4",
        "@mui/material": "^5.9.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-redux": "^7.2.4",
        "react-router": "^6.3.0",
        "react-router-dom": "^6.3.0",
        "react-scripts": "4.0.3",
        "react-transition-group": "^4.4.3",
        "styled-components": "^5.3.0",
        "web-vitals": "^1.0.1",
      },
      ...

}

Changing the IconButton into a Button component causes the exactly same error. I'm out of ideas how to troubleshoot the problem any further.

CodePudding user response：

It looks like the react-transition-group 4.4.3 broke and may be missing project files. Downgrading to 4.4.2 worked for me.

% npm install [email protected]

This issue may have been resolved in 4.4.4

https://github.com/reactjs/react-transition-group/issues/844

CodePudding user response：

If you followed instructions of that post, then You should have this line in your package.json dependencies:

"@types/react-transition-group": "^4.4.1"

try

npm install @types/react-transition-group

This may solve your problem.