無法解析 MUI IconButton 中的“react-transition-group”

Question

這個錯誤

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

盡管遵循了說明並運行了npm install react-transition-group ，但仍然持續存在。 此外，嘗試使用rm -rf node_modules && rm -f package-lock.json && npm cache clean --force && npm install但沒有任何改變。

這是App.js 。 我已經用注釋標記了錯誤發生的位置。 經過反復試驗，我發現即使不使用該組件也無法編譯。 導入足以導致它失敗。

    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;

這是我的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",
      },
      ...

}

將IconButton更改為Button組件會導致完全相同的錯誤。 我不知道如何進一步解決問題。

Answer 1

如果您按照該帖子的說明進行操作，那么您的package.json依賴項中應該有這一行：

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

嘗試

npm install @types/react-transition-group

這可能會解決您的問題。

Answer 2

看起來 react-transition-group 4.4.3 壞了，可能缺少項目文件。 降級到 4.4.2 對我有用。

% npm install react-transition-group@4.4.2

此問題可能已在 4.4.4 中解決

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