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

admin管理员组

文章数量:1277885

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='munityLabel'>
   <MenuItem value='#' hidden={true}></MenuItem>
      {munities.map(munity => (
          <MenuItem value={munity.id} key={munity.id}>
             {munity.id + ' - ' + munity.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 es 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

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='munityLabel'>
   <MenuItem value='#' hidden={true}></MenuItem>
      {munities.map(munity => (
          <MenuItem value={munity.id} key={munity.id}>
             {munity.id + ' - ' + munity.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 es 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

• javascript
• reactjs
• typescript
• next.js
• material-ui

Share Improve this question Follow asked Sep 10, 2022 at 18:23 khandoraskhandoras 6511 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

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

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

incorrect:

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

correct:

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

本文标签： javascriptMaterial UI cannot use import statement outside a moduleSelect dependencyStack Overflow