[React Native] Export namespace should be first transformed by `@babel/plugin-transform-export-namespace-from`

[AuroPick]

Hello,

I am trying to use v4 in a React Native project, but when I launch the app, this error appears.

 BUNDLE  ./index.js 
 ERROR  node_modules/zod/dist/esm/v4/classic/external.js: /Users/xxx/Desktop/xxx/xxx/node_modules/zod/dist/esm/v4/classic/external.js: Export namespace should be first transformed by `@babel/plugin-transform-export-namespace-from`.
> 1 | export * as core from "zod/v4/core";
    |        ^^^^^^^^^
  2 | export * from "./schemas.js";
  3 | export * from "./checks.js";
  4 | export * from "./errors.js";

package.sjon

{
  "name": "xxx",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios --simulator='iPhone 16'",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@gorhom/bottom-sheet": "5.1.6",
    "@native-html/heuristic-table-plugin": "0.7.0",
    "@react-native-vector-icons/icomoon": "12.0.0",
    "@react-navigation/bottom-tabs": "7.3.13",
    "@react-navigation/native": "7.1.9",
    "@react-navigation/stack": "7.3.2",
    "@reduxjs/toolkit": "2.8.2",
    "@tanstack/react-query": "5.80.7",
    "awesome-debounce-promise": "2.1.0",
    "axios": "1.9.0",
    "moment": "2.30.1",
    "react": "19.0.0",
    "react-native": "0.79.2",
    "react-native-advanced-input-mask": "1.4.0",
    "react-native-bootsplash": "6.3.8",
    "react-native-date-picker": "5.0.12",
    "react-native-device-info": "14.0.4",
    "react-native-gesture-handler": "2.25.0",
    "react-native-keyboard-controller": "1.17.4",
    "react-native-keychain": "10.0.0",
    "react-native-localize": "3.4.1",
    "react-native-mmkv": "3.2.0",
    "react-native-otp-entry": "^1.8.4",
    "react-native-reanimated": "3.17.5",
    "react-native-reanimated-carousel": "4.0.2",
    "react-native-render-html": "6.3.4",
    "react-native-safe-area-context": "5.4.1",
    "react-native-screens": "4.11.0",
    "react-native-url-polyfill": "2.0.0",
    "react-redux": "9.2.0",
    "redux-persist": "6.0.0",
    "sprintf-js": "1.1.3",
    "tinycolor2": "1.6.0",
    "usehooks-ts": "3.1.1",
    "zod": "3.25.67"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@xxx/eslint-config-typescript": "^1.2.0",
    "@react-native-community/cli": "18.0.0",
    "@react-native-community/cli-platform-android": "18.0.0",
    "@react-native-community/cli-platform-ios": "18.0.0",
    "@react-native/babel-preset": "0.79.2",
    "@react-native/eslint-config": "0.79.2",
    "@react-native/metro-config": "0.79.2",
    "@react-native/typescript-config": "0.79.2",
    "@tanstack/eslint-plugin-query": "^5.78.0",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "@types/sprintf-js": "^1.1.4",
    "@types/tinycolor2": "^1.4.6",
    "babel-plugin-module-resolver": "^5.0.2",
    "eslint": "8.57.0",
    "jest": "^29.6.3",
    "prettier": "^3.5.3",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

tsconfig.json

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "noUncheckedIndexedAccess": true,
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["src/assets/*"],
      "@components/*": ["src/components/*"],
      "@constants/*": ["src/constants/*"],
      "@core/*": ["src/core/*"],
      "@features/*": ["src/features/*"],
      "@hooks/*": ["src/hooks/*"],
      "@layouts/*": ["src/layouts/*"],
      "@listeners/*": ["src/listeners/*"],
      "@modules/*": ["src/modules/*"],
      "@routers/*": ["src/routers/*"],
      "@screens/*": ["src/screens/*"],
      "@service/*": ["src/service/*"],
      "@stores/*": ["src/stores/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src", "types"]
}

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@assets': './src/assets',
          '@components': './src/components',
          '@constants': './src/constants',
          '@core': './src/core',
          '@features': './src/features',
          '@hooks': './src/hooks',
          '@layouts': './src/layouts',
          '@listeners': './src/listeners',
          '@modules': './src/modules',
          '@routers': './src/routers',
          '@screens': './src/screens',
          '@service': './src/service',
          '@stores': './src/stores',
          '@utils': './src/utils',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

[Iuriy-Budnikov]

@AuroPick I'm getting such an issue with @hookform/resolvers 5.1.1. It appears to have been introduced by @hookform/resolvers. 5.1.0 works fine.

[abisalde]

@AuroPick I'm getting such an issue with @hookform/resolvers 5.1.1. It appears to have been introduced by @hookform/resolvers. 5.1.0 works fine.

Not sure if this resolves the issue and I am struggling to bundle my app

zod: "3.25.67",
@hookform/resolvers: "5.1.0"

[abisalde]

@AuroPick I have been able to resolve this.

Can you add @babel/plugin-transform-export-namespace-from to babel.config.js inside the plugin array

[colinhacks]

As others have said:

// babel.config.js
module.exports = {
  presets: [ 'module:metro-react-native-babel-preset' ],
  plugins: [
    // …any existing plugins…
    '@babel/plugin-proposal-export-namespace-from',
  ],
};

Closing, not a Zod bug.