Material UI: cannot use import statement outside a module

Heeey, My question is the following:

I have this project, made with NextJS React with node. Straight to the point, my app works well, except when reloading a page with a Select from Material UI. The code that matters in that page is:

<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>

Now, my page works great, up until pressing F5 or reloading the page with the "Relaod" button of my browser. Then, it show the following message:

"SyntaxError: Cannot use import statement outside a module". If I start digging (not much though) it appears the error comes from a dependency from node_modules, it being from @mui/material and being Select.

The way I import Select is:

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

The image showing the error

CodePudding user response：

You're not importing Select properly . Do this instead :

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