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

Question

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

monim · Accepted Answer · 2022-09-10 18:42:42Z

8

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

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

answered Sep 10, 2022 at 18:42

monim

4,4762 gold badges14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

khandoras Over a year ago

Thank you! Visual Studio code was showing me an incorrect import, and I didn't check if it was completely ok.

monim Over a year ago

So it has nothing to do with the import statement ?

khandoras Over a year ago

Yes, it was the import statement! Thank you very much!

Behzad · Accepted Answer · 2023-04-22 12:14:21Z

5

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

answered Apr 22, 2023 at 12:14

Behzad

2,2601 gold badge26 silver badges50 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related