next.js 物料界面:无法在模块外部使用import语句-选择依赖项

jfgube3f  于 2023-04-30  发布在  其他
关注(0)|答案(2)|浏览(140)

Hey,我的问题如下:
我有这个项目,用NextJS + React with node做的。直截了当地说,我的应用程序运行良好,除了当重新加载一个页面与选择从材料用户界面。该页面中重要的代码是:

<Select defaultValue='#' onChange={e => setCommunityCode(e.target.value)} labelId='communityLabel'>
   <MenuItem value='#' hidden={true}></MenuItem>
      {communities.map(community => (
          <MenuItem value={community.id} key={community.id}>
             {community.id + ' - ' + community.name}
          </MenuItem>
   ))}
</Select>

现在,我的页面工作得很好,直到按下F5或用浏览器的“Relaod”按钮重新加载页面。然后,它显示以下消息:
“语法错误:无法在模块“”之外使用导入语句。如果我开始挖掘(虽然不多),它看起来是来自node_modules的依赖,它来自@mui/material和Select。
我导入Select的方式是:

import Select from '@mui/material/Select/Select';

The image showing the error

0mkxixxg

0mkxixxg1#

您没有正确导入选择。请改为执行以下操作:

import Select from '@mui/material/Select';
// or
import { Select } from '@mui/material';
z4iuyo4d

z4iuyo4d2#

MUI v5,Grid2组件,对我来说是这样解决的:

不正确:

import Grid from "@mui/material/Unstable_Grid2/Grid2";

正确:

import Grid from "@mui/material/Unstable_Grid2";

相关问题