CODEWITHSUNDEEP
javascriptreactjstypescriptnext.jsmaterial-ui
khandoras
khandoras

Reputation: 65

Material UI: cannot use import statement outside a module - Select dependency

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

Upvotes: 6

Views: 3219

Answers (2)

Behzad
Behzad

Reputation: 2200

MUI v5, Grid2 component, for me solved in this way:

incorrect:

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

correct:

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

Upvotes: 5

monim
monim

Reputation: 4383

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

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

Upvotes: 8

Related Questions