error on import

[pgbradbury]

I have tried importing this as both

import { Image } from "mui-image";

and

import Image from "mui-image";

in both instances I get the following error

error - SyntaxError: Cannot use import statement outside a module

It is simply in a list of other imports and if I remove it all is fine.

[benmneb]

What environment are you using it in?

[pgbradbury]

yarn package manager

next.js with the following packages

    "@emotion/cache": "^11.5.0",
    "@emotion/react": "^11.5.0",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@fullstory/browser": "^1.4.9",
    "@mui/material": "^5.0.6",
    "@mui/types": "^7.1.0",
    "@next-auth/prisma-adapter": "^0.5.2-next.19",
    "@prisma/client": "^3.5.0",
    "@sentry/fullstory": "^1.1.6",
    "@sentry/nextjs": "^6.14.1",
    "@types/next-auth": "^3.15.0",
    "axios": "^0.24.0",
    "bcrypt": "^5.0.1",
    "clsx": "^1.1.1",
    "md5": "^2.3.0",
    "mui-image": "^1.0.0",
    "next": "12.0.2",
    "next-auth": "^4.0.0-beta.7",
    "prop-types": "^15.7.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-feather": "^2.0.9",
    "recoil": "^0.5.2"

[pgbradbury]

@benmneb any ideas?

[benmneb]

Not sure. I think I've only seen this error with back-end stuff. I just yarn created a next-app and installed those dependencies and I could add the mui-image fine.

Can you reproduce the error in a codesandbox?

I assume you looked at these questions?

[Qw4z1]

Getting the same error. Also running Nextjs, which I guess is a mix of backend and frontend. Reproduced the error in a minimal yarn create next-app project here -> https://github.com/Qw4z1/moduletest.

The question you linked refers to next/dynamic. The code below works, but it kills SSR which is not desirable.

const Image = dynamic( () => import('mui-image'), { ssr: false })

[wimil]

the same thing happens to me, it has to do with next js and ssr

[AhmadNaeemK]

` SyntaxError: Cannot use import statement outside a module

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
  at Object.<anonymous> (node_modules/mui-image/lib/Image.js:10:38)`

I am facing similar error with react. The import happens easily but during tests it gives this.

[jelofsson]

I also get this error when using import in a remix-js project.

SyntaxError: Cannot use import statement outside a module
...
    at Object.<anonymous> (/../node_modules/mui-image/lib/Image.js:10:38)

[jodik]

Issue still persisting

[bigen1925]

I got the same error when building. The entire error message is below.

> Build error occurred
/Users/mitsuru_kasai/Documents/github/toiro/frontend/node_modules/@mui/material/styles/styled.js:1
import { createStyled, shouldForwardProp } from '@mui/system';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/mitsuru_kasai/Documents/github/toiro/frontend/node_modules/mui-image/lib/Image.js:10:38)
    at Module._compile (node:internal/modules/cjs/loader:1103:14) {
  type: 'SyntaxError'
}

From error message, I think ways to import in Image.js may be wrong, and I tried to change them to the same ways with referencing documents of MUI (styled, and createSvgIcon. PR: https://github.com/benmneb/mui-image/pull/16/files

Then, I could build my React application with mui-image built with above code.

---

I haven't understood exactly why it works with this change, so there may be better way.

[senorMk]

Any update on this @benmneb?

[benmneb]

You're absolutely right about the imports. From the MUI docs: Be aware that we only support first and second-level imports. Anything deeper is considered private and can cause issues... and causing issues it was. Very nice find, thanks.

mui-image 1.0.6 has your fix, and I just tested it on the above next repo and it now works without errors. 🥳

[bigen1925]

Be aware that we only support first and second-level imports.

Ahh, I also couldn't found this...

I'm so glad to help you! ;)

[benmneb]

The problem with this is a ~4x increase in bundle size, due to the import coming from @mui/system. So I've changed it to @mui/material like the rest and now the size is the same as before, but still works with next.

So use v1.0.7 instead 😁

[bigen1925]

Thank you @benmneb !

I also confirmed that it works on my project with v1.0.7 :D