React报错Element type is invalid，请求协助排查解决

问题描述 #

在CodeSandbox中运行React代码时，持续抛出以下错误：

Error - Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

提示需检查<App>组件的render方法，相关代码如下：

App.js #

import React, { useState } from "react";
import {
  RadioGroup,
  FormControlLabel,
  Radio,
  FormControl,
  Button,
  Grid,
  Typography,
  TextField,
  Autocomplete
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import CloseIcon from "@material-ui/icons/Close";
import { ResizableBox } from "react-resizable";
import "react-resizable/css/styles.css";

const useStyles = makeStyles((theme) => ({
  closeIcon: {
    color: "rgba(0, 0, 0, 0.54)",
    cursor: "pointer",
    "&:hover": {
      color: "rgba(0, 0, 0, 0.87)"
    }
  },
  formWrapper: {
    width: "50%",
    float: "left",
    paddingRight: "20px"
  },
  resizableBox: {
    background: "#f0f0f0",
    border: "1px solid #ddd",
    padding: "10px"
  },
  handle: {
    height: "10px",
    background: "#ddd",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    cursor: "row-resize",
    userSelect: "none",
    "& span": {
      fontSize: "12px"
    }
  }
}));

export default function App() {
  const classes = useStyles();
  const [value, setValue] = useState("option1");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const top100Films = [
    { title: "The Shawshank Redemption", year: 1994 },
    { title: "The Godfather", year: 1972 },
    { title: "The Godfather: Part II", year: 1974 },
    { title: "The Dark Knight", year: 2008 },
    { title: "12 Angry Men", year: 1957 }
  ];

  return (
    <div>
      <div className={classes.formWrapper}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <TextField
              fullWidth
              variant="outlined"
              placeholder="Enter Text"
              InputProps={{
                endAdornment: (
                  <CloseIcon className={classes.closeIcon} fontSize="small" />
                )
              }}
            />
          </Grid>
          <Grid item xs={12}>
            <FormControl component="fieldset">
              <Typography>Select</Typography>
              <RadioGroup value={value} onChange={handleChange}>
                <Grid container spacing={1}>
                  <Grid item>
                    <FormControlLabel
                      value="option1"
                      control={<Radio />}
                      label="Option 1"
                    />
                  </Grid>
                  <Grid item>
                    <FormControlLabel
                      value="option2"
                      control={<Radio />}
                      label="Option 2"
                    />
                  </Grid>
                  <Grid item>
                    <FormControlLabel
                      value="option3"
                      control={<Radio />}
                      label="Option 3"
                    />
                  </Grid>
                  <Grid item>
                    <Button variant="contained" color="primary">
                      Click me!
                    </Button>
                  </Grid>
                </Grid>
              </RadioGroup>
            </FormControl>
          </Grid>
          <Grid item xs={12}>
            <Autocomplete
              fullWidth
              multiple
              id="tags-standard"
              options={top100Films}
              getOptionLabel={(option) => option.title}
              renderInput={(params) => (
                <TextField
                  {...params}
                  variant="standard"
                  label="Favorites"
                  placeholder="Favorites"
                />
              )}
            />
          </Grid>
        </Grid>
      </div>
      <ResizableBox
        width={300}
        height={200}
        className={classes.resizableBox}
        resizeHandles={["se"]}
      >
        <div className={classes.handle}>
          <span>Drag here to resize</span>
        </div>
      </ResizableBox>
    </div>
  );
}

index.js #

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

解决方案 #

错误源于两处组件导入逻辑错误：

• Autocomplete组件导入路径错误
  在Material UI v4版本中，Autocomplete属于实验室组件，不属于@material-ui/core内置组件，需从@material-ui/lab导入。修改导入语句：

  // 替换原有Autocomplete导入
  import { Autocomplete } from "@material-ui/lab";
  

  同时需确保环境已安装@material-ui/lab依赖。

• ResizableBox组件导入方式错误
  react-resizable库中ResizableBox为默认导出，而非命名导出，修改导入语句：

  // 替换原有ResizableBox导入
  import ResizableBox from "react-resizable";
  

修改完成后重新运行代码，即可解决该渲染错误。

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