跟随Django+React教程开发时@material-ui的FormHelperText导入错误无法解决

问题根因 #

@material-ui/core（即Material UI v4版本）的单组件路径导入规则为默认导出，你使用命名导出的写法（加{}包裹组件名）无法匹配导出规则，因此触发导入报错。

修复步骤 #

1. 修正导入语句 #

将代码头部的导入部分替换为以下内容，去掉非必要的大括号：

import React,{Component} from 'react'
import Button from '@material-ui/core/Button'
import Grid from "@material-ui/core/Grid"
import Typography  from '@material-ui/core/Typography'
import TextField  from '@material-ui/core/TextField'
import FormHelperText from '@material-ui/core/FormHelperText'
import FormControl from '@material-ui/core/FormControl'
import {Link} from 'react-router-dom'
import Radio from '@material-ui/core/Radio'
import RadioGroup from '@material-ui/core/RadioGroup'
import FormControlLabel from '@material-ui/core/FormControlLabel'

你也可以选择更简洁的根路径批量命名导入写法，效果一致：

import React,{Component} from 'react'
import { Button, Grid, Typography, TextField, FormHelperText, FormControl, Radio, RadioGroup, FormControlLabel } from '@material-ui/core'
import {Link} from 'react-router-dom'

2. 重启项目验证 #

修改导入后直接重启开发服务即可生效，如果仍有报错可以执行以下操作重置依赖：

• 删除项目根目录下的node_modules文件夹、package-lock.json或yarn.lock文件
• 执行npm install重新安装所有依赖
• 执行npm run start启动开发服务
  后续所有同类@material-ui/core的导入报错都可以按照上述规则统一修正即可。

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