React Native Upgrade 0.72.5 -> 0.73.1 | export declaration must be at top level of module export default

[bweston92]

Environment

System:
  OS: macOS 14.2
  CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Memory: 661.94 MB / 8.00 GB
  Shell:
    version: 3.2.57
    path: /bin/bash
Binaries:
  Node:
    version: 21.4.0
    path: ~/.nvm/versions/node/v21.4.0/bin/node
  Yarn:
    version: 3.5.1
    path: ~/.volta/bin/yarn
  npm:
    version: 10.2.4
    path: ~/.nvm/versions/node/v21.4.0/bin/npm
  Watchman:
    version: 2023.10.09.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.13.0
    path: /usr/local/opt/ruby/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 15.1/15C65
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 21.0.1
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.1
    wanted: 0.73.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Things I’ve done to figure out my issue

• [x] I used upgrade-helper to do my upgrade.
• [x] Cleaned all previous build files.

Upgrading version

0.73.1

Description

The generated JS bundle has export statements inside of functions which appears not to work.

Logs

info Writing bundle output to:, /Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle
info Done writing bundle output
info Copying 11 asset files
info Done copying assets
+ [[ true == false ]]
+ EXTRA_COMPILER_ARGS=
+ [[ true == true ]]
+ EXTRA_COMPILER_ARGS=-Og
+ [[ '' == true ]]
+ /Users/bweston/workspace/src/lwebco.de/cosmic-whatschat-experiment/mobapp/ios/Pods/hermes-engine/destroot/bin/hermesc -emit-binary -max-diagnostic-width=80 -Og -out /Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/Cosmic.app/main.jsbundle /Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:63726:3: error: export declaration must be at top level of module
  export var __INTERNAL_VIEW_CONFIG = {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:63730:3: error: export declaration must be at top level of module
  export default _$$_REQUIRE(_dependencyMap[4], "react-native/Libraries/NativeComponent/NativeComponentRegistry").get(nativeComponentName, function () {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:63733:3: error: export declaration must be at top level of module
  export var Commands = {
  ^~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:67270:3: error: export declaration must be at top level of module
  export var __INTERNAL_VIEW_CONFIG = {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:67274:3: error: export declaration must be at top level of module
  export default _$$_REQUIRE(_dependencyMap[2], "react-native/Libraries/NativeComponent/NativeComponentRegistry").get(nativeComponentName, function () {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:78179:3: error: export declaration must be at top level of module
  export var __INTERNAL_VIEW_CONFIG = {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:78185:3: error: export declaration must be at top level of module
  export default _$$_REQUIRE(_dependencyMap[2], "react-native/Libraries/NativeComponent/NativeComponentRegistry").get(nativeComponentName, function () {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:84197:3: error: export declaration must be at top level of module
  export var __INTERNAL_VIEW_CONFIG = {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:84219:3: error: export declaration must be at top level of module
  export default _$$_REQUIRE(_dependencyMap[7], "react-native/Libraries/NativeComponent/NativeComponentRegistry").get(nativeComponentName, function () {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:84222:3: error: export declaration must be at top level of module
  export var Commands = {
  ^~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:84251:3: error: export declaration must be at top level of module
  export var __INTERNAL_VIEW_CONFIG = {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:84272:3: error: export declaration must be at top level of module
  export default _$$_REQUIRE(_dependencyMap[6], "react-native/Libraries/NativeComponent/NativeComponentRegistry").get(nativeComponentName, function () {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:84275:3: error: export declaration must be at top level of module
  export var Commands = {
  ^~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:119805:3: error: export declaration must be at top level of module
  export var __INTERNAL_VIEW_CONFIG = {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:119816:3: error: export declaration must be at top level of module
  export default _$$_REQUIRE(_dependencyMap[3], "react-native/Libraries/NativeComponent/NativeComponentRegistry").get(nativeComponentName, function () {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:120947:3: error: export declaration must be at top level of module
  export var __INTERNAL_VIEW_CONFIG = {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:120955:3: error: export declaration must be at top level of module
  export default _$$_REQUIRE(_dependencyMap[3], "react-native/Libraries/NativeComponent/NativeComponentRegistry").get(nativeComponentName, function () {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:121443:3: error: export declaration must be at top level of module
  export var __INTERNAL_VIEW_CONFIG = {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:121476:3: error: export declaration must be at top level of module
  export default _$$_REQUIRE(_dependencyMap[3], "react-native/Libraries/NativeComponent/NativeComponentRegistry").get(nativeComponentName, function () {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/Users/bweston/Library/Developer/Xcode/DerivedData/Cosmic-fqxwpgxuqedulceccifbecafyfwc/Build/Products/Debug-iphoneos/main.jsbundle:121924:3: error: export declaration must be at top level of module
  export var __INTERNAL_VIEW_CONFIG = {
  ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<unknown>:0: error: too many errors emitted

** BUILD FAILED **

When I build for iOS device plugged in I get these errors.

When I build for a simulator I get the following:

[mo-fouad]

Any fix yet?!

[bweston92]

@mo-fouad no, do you have the same issue?

[vipulSoni458]

Also getting the same issue

[vipulSoni458]

Update : It got fixed for me. Issue was in react-native-safe-area-context pakage. If anybody using this pakage please update it . It might solve the error for you. Also run this line in browser to get the full stack trace http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true it will give you the exact line where error is occurring. Thanks

[bweston92]

Thank you for your help @vipulSoni458

I managed to fix this particular error with the export statements by removing other Babel plugins and just using the new preset.

[paulschreiber]

This change fixed the problem for me:

-    presets: [
-      'module:@react-native/babel-preset',
-      ['@babel/preset-env', {targets: {node: 'current'}}],
-      '@babel/preset-typescript',
-    ],
+    presets: ['module:@react-native/babel-preset'],

[the-real-adammork]

This change fixed the problem for me:

-    presets: [
-      'module:@react-native/babel-preset',
-      ['@babel/preset-env', {targets: {node: 'current'}}],
-      '@babel/preset-typescript',
-    ],
+    presets: ['module:@react-native/babel-preset'],

this worked for me too, thanks

[GabrielBursi]

Update : It got fixed for me. Issue was in react-native-safe-area-context pakage. If anybody using this pakage please update it . It might solve the error for you. Also run this line in browser to get the full stack trace http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true it will give you the exact line where error is occurring. Thanks

I would recommend to change the query parameter minify=true, this will show you a JSON with the exact error, it worked for me, with minify=false doesn't show the error

[manan-schmooze]

None of the above are working for me :(

[mikewguo]

For me, it's because my project had a couple of .tsx file (i copied from some where), and this needs to have typescript installed, but my project didn't. I just turned .tsx file to .js file, and the error is resolved.

[malikzype]

Facing same issue, none of the solution worked for me

[usmanabid94]

None of this worked for me

[ysfzrn]

I removed the "@babel/plugin-transform-modules-commonjs" library and it worked.