Issue : SyntaxError: Cannot use import statement outside a module for mui-tel-input

[Rapter1990]

I have a problem to import mui-tel-input in my typescript with React project.

I install it to my project through it.

yarn --cwd <my-project-folder> t add mui-tel-input

Here is the relevant part of the code shown below

import React, { useEffect, useRef, useState } from 'react';
import { MuiTelInput } from 'mui-tel-input';

const handlePhoneChange = (value: string) => {
      if (userData) {
        setUserData((prevData) => ({
          ...prevData!,
          phoneNumber: value,
        }));
      }
    };

<MuiTelInput
              label="Phone Number"
              variant="outlined"
              name="phoneNumber"
              value={userData?.phoneNumber}
              onChange={handlePhoneChange}
            />

I got this error shown below

SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.

node_modules/mui-tel-input/dist/mui-tel-input.es.js (1)

[viclafouch]

Are u using next js ?

[Rapter1990]

@viclafouch Yeah, I use next.js

[viclafouch]

Duplicated with https://github.com/viclafouch/mui-tel-input/issues/84#issuecomment-1760126480

[Rapter1990]

Here is the jest.config.js shown below

module.exports = {
  roots: ['<rootDir>/src'],
  testMatch: [
    '**/__tests__/**/*.+(ts|tsx|js)',
    '**/?(*.)+(spec|test).+(ts|tsx|js)',
  ],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  transpilePackages: ['mui-tel-input']
}

@viclafouch it didn't help me fix the issue.