SyntaxError: Cannot use import statement outside a module - Next js

[Donivanes]

trafficstars

Hi, I'm having this issue with this library and I don't know how to fix it. I'm using Next js Sometimes it renders, but when you reload the error happens. Here is an example of the error: https://codesandbox.io/s/affectionate-easley-8by211?file=/pages/index.tsx

The terminal error:

import { createStyled, shouldForwardProp } from '@mui/system';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:101:18)
    at Object.<anonymous> (/sandbox/node_modules/mui-nested-menu/components/IconMenuItem.js:56:32)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)

[Donivanes]

I've fixed it locally just changing the way that the component IconMenuItem imports styled

import { styled } from '@mui/material/styles';

I hope this help more people

[webzep]

Hey @Donivanes,

Check out this recent change to the import statements...

Can you just double check in your local build that importing like this works too:

import {styled} from '@mui/system';

cc @jraoult - thought you might be interested in this. Any thoughts from your recent research?

[Donivanes]

Hey @Donivanes,

Check out this recent change to the import statements...

Can you just double check in your local build that importing like this works too:

import {styled} from '@mui/system';

cc @jraoult - thought you might be interested in this. Any thoughts from your recent research?

Yes, with that import it also works. I've also tried with the previous version (2.1.1) and the same error happens (check the codesandbox). That could be because of a MUI package recent updates?

[jraoult]

@steviebaa @Donivanes, it is not related to the changes we made in the aforementioned PR, but it is defo related to the way ESM modules and CommonJS modules interact.

• mui-nested-menu is only published as a CommonJS package: exclusively uses require to load dependencies)
• MUI is published in both CommonJS format and ESM format: it can be imported with require or import if the config is right
• it is not possible to use require to import an ESM module

Somehow, in the provided code sandbox, the Node CommonJS loader is loading the ESM module of styled instead of the CommonJS version and then throws an error since it is not supported. I know almost nothing at NextJS, so I can not really help further, I'm afraid, but I'd try to understand why the Node loader is trying to load the wrong file

Also just wanted to add that as I mentioned in the PR, might be a good idea anyway to publish this package in both CommonJS and ESM format.

[webzep]

Nice one, thanks Jon.

Ivan, I'll try getting around to creating a branch which has the esm and cjs versions in the build. Ill try downloading that sandbox and testing it with that. also ill let you know so you can give it a go and we can publish if all goes well.

Im a bit flat out this week/weekend so might take me a week to get around to it.

[webzep]

Too interesting not to have a quick go, who needs sleep...

@Donivanes If you want to pull down this branch then run the command npm run pack. Then try using the generated /dist folder in your project.

I haven't tested it myself yet.

[samboylett]

I get this issue in jest tests - using the public import fixed it (in this case I mocked it):

jest.mock('@mui/material/styles/styled', () => {
  const { styled } = require('@mui/material');

  return styled;
});

[jdanielsyeah]

I'm still getting the originally posted issue in NextJS:

import { createStyled, shouldForwardProp } from '@mui/system';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/jamesdaniels/next-amplified/node_modules/mui-nested-menu/index.js:7:38)
    at Module._compile (node:internal/modules/cjs/loader:1126:14) {
  page: '/'
}

There is a slight difference between mine and the original in that my error originates here: .../node_modules/mui-nested-menu/index.js:7:38

Whereas the original issue included this instead: .../node_modules/mui-nested-menu/components/IconMenuItem.js:56:32

"dependencies": {
...
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/lab": "^5.0.0-alpha.96",
    "@mui/material": "^5.9.2",
    "mui-nested-menu": "^3.1.0",
    "next": "12.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

Is there anything I can do to fix this?

[schealex]

i'm experiancing the same error

import { createStyled, shouldForwardProp } from '@mui/system';
^^^^^^

SyntaxError: Cannot use import statement outside a module

tried copying the code of the package directly to my project (that works fine) but i would rather use the package

[skulltech]

Facing this issue as well.

[abelozerov]

In this thread MUI dev says 4 level import like @mui/material/styles/styled is not supported, so definitely something needs to be updated in mui-nested-menu codebase

[abelozerov]

P/R added: https://github.com/steviebaa/mui-nested-menu/pull/32

[Jaggler3]

Ran into the same issue, wanted to say PR #32 fixed it for me

[bloidev]

In this thread MUI dev says 4 level import like @mui/material/styles/styled is not supported, so definitely something needs to be updated in mui-nested-menu codebase

this work for me.

just have a file with the import "@mui/material/styles/styled" remove styled to import {styled} @mui/material/styles and work it. thank's