使用Storybook构建React+Material UI项目时遇到‘ForwardRef未导出’错误

Hey there, let's work through this frustrating error you're facing. That Error: 'ForwardRef' is not exported by node_modules\@material-ui\utils\node_modules\react-is\index.js message usually points to dependency version mismatches or duplicate package installations—here's how to fix it:

1. Force a unified react-is version #

The ForwardRef export was added to react-is in version 16.13.0. The error shows that @material-ui/utils is using an older, nested version of react-is that doesn't include this export. To fix this:

• First, check what versions of react-is are in your project:

  npm ls react-is
  # Or for Yarn users:
  yarn list react-is
  

• Add an override/resolution to your package.json to force all dependencies to use a compatible react-is version (match it to your project's React version, e.g., 18.2.0 if you're on React 18):
  For npm:

  "overrides": {
    "react-is": "^18.2.0"
  }
  

  For Yarn:

  "resolutions": {
    "react-is": "^18.2.0"
  }
  

• Delete your node_modules and lock file, then reinstall dependencies:

  # npm
  rm -rf node_modules package-lock.json && npm install
  
  # Yarn
  rm -rf node_modules yarn.lock && yarn install
  

2. Verify Material UI and React version compatibility #

Make sure your Material UI and React versions play nice together:

• If you're using Material UI v4, it requires React 16.8.0+ and react-is v16.13.0+.
• If you're on Material UI v5 (now called MUI), it needs React 17.0.0+—double-check that your react, react-dom, and @mui/material (or @material-ui/core) versions are aligned.

3. Clear Storybook's cache #

Old cached files can sometimes hold onto outdated dependencies. Run this command to clear Storybook's cache, then restart your Storybook server:

npx storybook@latest clean

4. Double-check for duplicate react-is installations #

The error path (@material-ui/utils/node_modules/react-is) confirms there's a nested installation of react-is. The override/resolution step above should resolve this by forcing all parts of your project to use the same version, but if you still see issues, you can manually check your lock file to ensure no older versions are being pulled in.

Give these steps a shot—they should resolve the export error. If you're still stuck, feel free to share your package.json dependencies and I can help troubleshoot further!

内容的提问来源于stack exchange，提问作者Harshad Prajapati