React native – require() not supported, uses a dynamic import() which is available in all CommonJS modules

I have a project with SDK 47 which the Play Store stopped accepting and I found myself in the situation of updating the project.

I tried to update SDK 48 without success, after several attempts I decided to create a new expo project with SDK 49 and carefully move the files and configurations from the old project to the new one. After solving bugs, errors and dependency versions, the project ran without problems. 🙂 Thinking that by having a project with SDK 49 all my problems would be solved, I made a build for Android and when I uploaded it to the play store I found the same problem.

The app must target Android 13 (API level 33) or later 😦

I did an npx expo-doctor@latest and saw that there were problems with the @isaacs/cliui dependency, after solving it (or so I think), the build failed saying that there are problems with the wrap-ansi dependency.

/Users/marcos/Proyectos/GorilaST/Clientes/zizvio/zizvio-app/node_modules/@expo/cli/build/src/start/doctor/dependencies/ensureDependenciesAsync.js:9
var _wrapAnsi = _interopRequireDefault(require("wrap-ansi"));
                                       ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/marcos/Proyectos/GorilaST/Clientes/zizvio/zizvio-app/node_modules/wrap-ansi/index.js from /Users/marcos/Proyectos/GorilaST/Clientes/zizvio/zizvio-app/node_modules/@expo/cli/build/src/start/doctor/dependencies/ensureDependenciesAsync.js not supported.
Instead change the require of index.js in /Users/marcos/Proyectos/GorilaST/Clientes/zizvio/zizvio-app/node_modules/@expo/cli/build/src/start/doctor/dependencies/ensureDependenciesAsync.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/marcos/Proyectos/GorilaST/Clientes/zizvio/zizvio-app/node_modules/@expo/cli/build/src/start/doctor/dependencies/ensureDependenciesAsync.js:9:40)
    at Object.<anonymous> (/Users/marcos/Proyectos/GorilaST/Clientes/zizvio/zizvio-app/node_modules/@expo/cli/build/src/start/doctor/web/WebSupportProjectPrerequisite.js:12:32)
    at Object.<anonymous> (/Users/marcos/Proyectos/GorilaST/Clientes/zizvio/zizvio-app/node_modules/@expo/cli/build/src/start/startAsync.js:16:38)
    at /Users/marcos/Proyectos/GorilaST/Clientes/zizvio/zizvio-app/node_modules/@expo/cli/build/src/start/index.js:117:40
    at async expoStart (/Users/marcos/Proyectos/GorilaST/Clientes/zizvio/zizvio-app/node_modules/@expo/cli/build/src/start/index.js:116:29) {
  code: 'ERR_REQUIRE_ESM'
}

I have tried everything I have found on the internet and I can’t get the Build to pass.

I give you some of the actions I do, their results and configuration files.

• npx expo-doctor@latest

Result

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check npm/ yarn versions
✔ Check that packages match versions required by installed Expo SDK
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn’t find any issues with the project!

• yarn list –pattern wrap-ansi
  Result

yarn list v1.22.19
├─ [email protected]
└─ [email protected]
✨  Done in 0.60s.

• package.json

{
  "name": "zizvio-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@isaacs/cliui": "^8.0.2",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-community/netinfo": "9.3.10",
    "@react-navigation/bottom-tabs": "^6.2.0",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.4.1",
    "axios": "^0.25.0",
    "expo": "~49.0.15",
    "expo-app-loading": "~2.1.1",
    "expo-application": "~5.3.0",
    "expo-auth-session": "~5.0.2",
    "expo-build-properties": "~0.8.3",
    "expo-checkbox": "~2.4.0",
    "expo-dev-client": "~2.4.12",
    "expo-device": "~5.4.0",
    "expo-font": "~11.4.0",
    "expo-linking": "~5.0.2",
    "expo-notifications": "~0.20.1",
    "expo-radio-button": "^1.0.8",
    "expo-random": "~13.2.0",
    "expo-secure-store": "~12.3.1",
    "expo-status-bar": "~1.6.0",
    "expo-updates": "~0.18.19",
    "expo-web-browser": "~12.3.2",
    "formik": "^2.2.9",
    "intl": "^1.2.5",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "luxon": "^3.4.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-dotenv": "^3.3.1",
    "react-native-dropdown-picker": "^5.3.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-maps": "1.7.1",
    "react-native-modal": "^13.0.0",
    "react-native-modal-datetime-picker": "^13.1.0",
    "react-native-root-toast": "^3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-uuid": "^2.0.1",
    "react-native-web": "~0.19.6",
    "react-navigation": "^4.4.4",
    "uuid": "^8.3.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-native": "^4.0.0",
    "prettier": "^2.5.1"
  },
  "resolutions": {
    "@expo/config-plugins": "~7.2.2",
    "@expo/prebuild-config": "~6.2.4",
    "wrap-ansi": "^8.1.0"
  },
  "private": true
}

• app.json

{
  "expo": {
    "name": "zizvio",
    "slug": "zizvio",
    "privacy": "unlisted",
    "version": "1.1.58",
    "scheme": "zizvio",
    "orientation": "portrait",
    "icon": "./src/assets/icon.png",
    "splash": {
      "image": "./src/assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.zizvio.zizvio1",
      "buildNumber": "1.0.44",
      "config": {
        "googleMapsApiKey": "**********FOPREDFGdfgWhP-N4KxcImioKkRtjBmxx9Rwo"
      },
      "infoPlist": {
        "NSLocationWhenInUseUsageDescription": "Esta app puede necesitar tu ubicación para realizar la entrega de los pedidos."
      }
    },
    "android": {
      "versionCode": 72,
      "adaptiveIcon": {
        "foregroundImage": "./src/assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.zizvio.zizvio",
      "config": {
        "googleMaps": {
          "apiKey": "**********FOPREDFGdfgWhP-N4KxcImioKkRtjBmxx9Rwo"
        }
      },
      "googleServicesFile": "./google-services.json"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "owner": "zizvio",
    "extra": {
      "eas": {
        "projectId": "********-5ed5-****-34ft-756975a8e09p"
      }
    },
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "compileSdkVersion": 33,
            "targetSdkVersion": 33,
            "minSdkVersion": 33,
            "buildToolsVersion": "33.0.0"
          }
        }
      ]
    ]
  }
}

I’ve been dealing with it for several days, it’s something very obvious but I haven’t found it and I’m exhausted and out of ideas to solve it.

I need to upload to the play store as soon as possible.

I will be attentive to respond and test each suggestion or idea.

Any help is appreciated. I await your answers. thank you.