SyntaxError: Cannot use import statement outside a module

[MatheusRyuki]

The react-plugin keep getting the error at Nextjs. (This is a SSR).

The dependencies:
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"animejs": "^3.2.0",
"axios": "^0.19.2",
"final-form": "^4.20.1",
"mui-rff": "^2.1.15",
"next": "^9.4.4",
"notistack": "^0.9.17",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-final-form": "^6.5.1",
"react-imask": "^6.0.5",
"react-swipeable-views": "^0.13.9",
"snyk": "^1.362.0",
"styled-components": "^5.1.1",
"yup": "^0.29.1"
},
"devDependencies": {
"@types/animejs": "^3.1.1",
"@types/node": "^14.0.23",
"@types/react": "^16.9.43",
"@types/react-swipeable-views": "^0.13.0",
"@types/styled-components": "^5.1.1",
"@types/yup": "^0.29.3",
"@typescript-eslint/eslint-plugin": "^3.6.1",
"@typescript-eslint/parser": "^3.6.1",
"babel-plugin-styled-components": "^1.10.7",
"cz-conventional-changelog": "3.2.0",
"eslint": "^7.4.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.8",
"prettier": "^2.0.5",
"typescript": "^3.9.6"
},

[aryehb]

See #322.

[MatheusRyuki]

@aryehb I've read this issue, however, it doesn't help at all, because this is on Jest, what I'm trying to do is run on Nextjs (ssr).

[aryehb]

Look at my comment here.

I looked through the Next.js source, but I can't tell if the default config excludes node_modules. You might have to use a custom Webpack config to set this.

[mircoservices]

@MatheusRyuki had the same issue in SSR, also couldn't get babel to work well with the esm import.

So I removed the forced esm import: mircoservices@653bfc3

Published as quick-fix:
https://www.npmjs.com/package/@mirco312312/react-imask

@uNmAnNeR is it required to explicitly import imask as esm?

[nfantone]

Same here. Trying to import react-imask from within a Next.js project doesn't seem to work.

[ghost]

@MatheusRyuki had the same issue in SSR, also couldn't get babel to work well with the esm import.

So I removed the forced esm import: mirco312312@653bfc3

Published as quick-fix:
https://www.npmjs.com/package/@mirco312312/react-imask

@uNmAnNeR is it required to explicitly import imask as esm?

This works for me! Many thanks

[nghiepdev]

For Next.js

import dynamic from 'next/dynamic';

const IMaskInput = dynamic(
  () => import('react-imask').then(mod => mod.IMaskInput),
  {ssr: false},
);

[cgarrovillo]

Has anyone found an actively maintained alternative to this library? I think at this point this library takes away from the whole "reusability" nature of things

[adrianos10]

We are using next-transpile-modules for imask (https://www.npmjs.com/package/next-transpile-modules) in our project and when it was upgraded to v6.0.0 I am also encountering this issue. When using the previous version ([email protected]) everything works fine.

[umairhm]

We were getting the following error while running Jest tests in an Nx (Angular) environment.

The configurations mentioned here helped us resolved the issue: https://github.com/thymikee/jest-preset-angular#transpile-js-files-through-babel-jest

[AlexBrasileiro]

For Next.js

import dynamic from 'next/dynamic';

const IMaskInput = dynamic(
  () => import('react-imask').then(mod => mod.IMaskInput),
  {ssr: false},
);

You save my day, thanks o/ (works on Next.js ^ 10.0.3)

[uNmAnNeR]

thanks guys, probably is fixed in 6.0.6