Material-ui List组件导入报错：Module not found: 'react' 求助

Hey there, let's work through this frustrating error you're hitting when trying to use Material-UI's List component. Based on the details you shared (React 16.13.1, MUI Core 4.11.0, Button working but List throwing a missing React dependency), here are some actionable steps to resolve it:

1. Clean and Reinstall Your Dependencies #

Corrupted node_modules files or incomplete installs are the most common culprit here. Let's start with a fresh install:

• First, delete your existing node_modules folder and lock files:

  rm -rf node_modules package-lock.json
  

• Then reinstall all dependencies:

  npm install
  

This clears any cached or broken files that might be causing MUI's List component to fail locating your project's React installation.

2. Verify React is Installed at the Project Root #

Double-check that React and ReactDOM are listed in your project's root package.json under dependencies. If they're missing (or were installed globally instead of locally), install them explicitly:

npm install react@16.13.1 react-dom@16.13.1

Material-UI components rely on having React installed locally in your project—global installs won't be recognized by the module resolver.

3. Check Your Webpack Configuration (If Applicable) #

If you're using a custom Webpack setup instead of Create React App, make sure your resolver is configured to look for modules in node_modules:

module.exports = {
  // ... other config
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx']
  }
};

A misconfigured resolver might prevent Webpack from finding your local React installation when processing MUI's components.

4. Reinstall Material-UI Specifically #

If the above steps don't work, try reinstalling Material-UI to rule out a broken package install:

npm uninstall @material-ui/core @material-ui-icons
npm install @material-ui/core@4.11.0 @material-ui/icons

Test the Fix #

After trying any of the above steps, restart your development server and test with a minimal example:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

function App() {
  return (
    <div style={{ padding: '2rem' }}>
      <Button variant="contained" color="primary">Hello World</Button>
      <List style={{ marginTop: '1rem' }}>
        <ListItem>
          <ListItemText primary="Sample List Item" />
        </ListItem>
      </List>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Most likely, step 1 or 2 will resolve the "Module not found: 'react'" error—those are the most common fixes for this specific issue with MUI v4.

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