React.forwardRef(ActivityIndicator) issue

[shijoavb]

Description

ActivityIndicator/ActivityIndicator.js: Missing initializer in const declaration. (156:41)

154 | */ 155 |

156 | const ActivityIndicatorWithRef: component( | ^ 157 | ref: React.RefSetter<HostComponent>, 158 | ...props: Props 159 | ) = React.forwardRef(ActivityIndicator);

Steps to reproduce

Npx react-native run-android

React Native Version

0.77.0

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: macOS 14.7.1
  CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Memory: 409.16 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.9.0
    path: /usr/local/bin/node
  Yarn: Not Found
  npm:
    version: 10.8.3
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.10.14.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.1
    path: /Users/shishijojacob/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK:
    API Levels:
      - "23"
      - "27"
      - "28"
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 27.0.3
      - 28.0.3
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-30 | Google Play Intel x86 Atom
      - android-33 | Google APIs Intel x86 Atom_64
      - android-35 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/local/bin/javac
  Ruby:
    version: 3.1.0
    path: /Users/shishijojacob/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.0
    wanted: ^0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js: Missing initializer in const declaration. (156:41)

  154 | */
  155 |
> 156 | const ActivityIndicatorWithRef: component(
      |                                          ^
  157 |   ref: React.RefSetter<HostComponent<empty>>,
  158 |   ...props: Props
  159 | ) = React.forwardRef(ActivityIndicator);
 BUNDLE  ./index.js

Reproducer

https://github.com/

Screenshots and Videos

No response

[react-native-bot]

[!WARNING] Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[karamanmertcan]

is there any solution?

[migueldaipre]

Hey @shijoavb, I couldn't reproduce the issue in my repository.

Please attach a repository or the code to reproduce the same.

[ShawnBaek]

I also encountered the same issues.

I resolved them by updating the npm package versions, setting them based on the reference from this project (npx @react-native-community/cli@latest init AwesomeProject).

Specifically, I updated the following packages: • @babel/core • @babel/preset-env • @babel/runtime • @react-native-community/cli • @react-native-community/cli-platform-android • @react-native-community/cli-platform-ios • @react-native/babel-preset • @types/react • eslint • jest • prettier • typescript

Hope it helps you

"name": "AwesomeProject",
      "version": "0.0.1",
      "dependencies": {
        "react": "18.3.1",
        "react-native": "0.77.0"
      },
      "devDependencies": {
        "@babel/core": "^7.25.2",
        "@babel/preset-env": "^7.25.3",
        "@babel/runtime": "^7.25.0",
        "@react-native-community/cli": "15.0.1",
        "@react-native-community/cli-platform-android": "15.0.1",
        "@react-native-community/cli-platform-ios": "15.0.1",
        "@react-native/babel-preset": "0.77.0",
        "@react-native/eslint-config": "0.77.0",
        "@react-native/metro-config": "0.77.0",
        "@react-native/typescript-config": "0.77.0",
        "@types/jest": "^29.5.13",
        "@types/react": "^18.2.6",
        "@types/react-test-renderer": "^18.0.0",
        "eslint": "^8.19.0",
        "jest": "^29.6.3",
        "prettier": "2.8.8",
        "react-test-renderer": "18.3.1",
        "typescript": "5.0.4"
      },
      "engines": {
        "node": ">=18"
      }

[Houdhey]

Same problem here, there are many problems of "Missing initializer in const declaration" in many files, not only ActivityIndicator.js (Button.js, SafeAreaView, Switch, InteractionManager...)

Please bring some fix on this

[alihamza1729]

Facing same problem

[CMLCNL]

/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js: Missing initializer in const declaration. (156:41)

  154 | */
  155 |
> 156 | const ActivityIndicatorWithRef: component(

still facing same issue

[Shmublon]

same here ERROR SyntaxError: /Users/artyomkalantay/WebstormProjects/Paw/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js: Missing initializer in const declaration. (156:41)

154 | */ 155 |

156 | const ActivityIndicatorWithRef: component( | ^ 157 | ref: React.RefSetter<HostComponent>, 158 | ...props: Props 159 | ) = React.forwardRef(ActivityIndicator);

[prashilak]

error SyntaxError: /node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js: Unexpected token, expected "=>" (372:1)

370 | ref?: React.RefSetter<$ReadOnly<{ setNextHeaderY: (number) => void }>>, 371 | ...ScrollViewStickyHeaderProps

372 | ); | ^ 373 370 | ref?: React.RefSetter<$ReadOnly<{ setNextHeaderY: (number) => void }>>, 371 | ...ScrollViewStickyHeaderProps 372 | );

Task :app:createBundleReleaseJsAndAssets FAILED

FAILURE: Build failed with an exception.

[pimich0]

Facing same problem here

[alihamza1729]

I have fixed it by adding presets: ['module:@react-native/babel-preset'], this in place of presets: ['module:metro-react-native-babel-preset'] in babel.config.js they have removed metro-react-native-babel-preset

[nielsq]

I have fixed it by adding presets: ['module:@react-native/babel-preset'], this in place of presets: ['module:metro-react-native-babel-preset'] in babel.config.js they have removed metro-react-native-babel-preset

I have that already set. Still have the issue

[alihamza1729]

I have fixed it by adding presets: ['module:@react-native/babel-preset'], this in place of presets: ['module:metro-react-native-babel-preset'] in babel.config.js they have removed metro-react-native-babel-preset

I have that already set. Still have the issue your package.json devDependencies should be like this "devDependencies": { "@babel/core": "^7.26.7", "@babel/preset-env": "^7.26.7", "@babel/runtime": "^7.26.7", "@react-native-community/cli": "15.1.3", "@react-native-community/cli-platform-android": "15.1.3", "@react-native-community/cli-platform-ios": "15.1.3", "@react-native/babel-preset": "0.77.0", "@react-native/eslint-config": "0.77.0", "@react-native/metro-config": "0.77.0", "@react-native/typescript-config": "0.77.0", "@types/jest": "^29.5.14", "@types/react": "^19.0.8", "@types/react-test-renderer": "^19.0.0", "eslint": "^9.19.0", "jest": "^29.7.0", "prettier": "3.4.2", "react-test-renderer": "19.0.0", "typescript": "5.7.3" }, delete node module reset cache and then start

[nielsq]

For me the issue was the package "@react-native/babel-preset" I did not updated it.

[vdzeer]

I have fixed it by adding presets: ['module:@react-native/babel-preset'], this in place of presets: ['module:metro-react-native-babel-preset'] in babel.config.js they have removed metro-react-native-babel-preset

I have that already set. Still have the issue

do u have your package.json devDependencies should be like this "devDependencies": { "@babel/core": "^7.26.7", "@babel/preset-env": "^7.26.7", "@babel/runtime": "^7.26.7", "@react-native-community/cli": "15.1.3", "@react-native-community/cli-platform-android": "15.1.3", "@react-native-community/cli-platform-ios": "15.1.3", "@react-native/babel-preset": "0.77.0", "@react-native/eslint-config": "0.77.0", "@react-native/metro-config": "0.77.0", "@react-native/typescript-config": "0.77.0", "@types/jest": "^29.5.14", "@types/react": "^19.0.8", "@types/react-test-renderer": "^19.0.0", "eslint": "^9.19.0", "jest": "^29.7.0", "prettier": "3.4.2", "react-test-renderer": "19.0.0", "typescript": "5.7.3" }, delete node module reset cache and then start

Your solution works! I have:

node -v: v22.13.1 npm -v: v11.1.0

babel.config.js

module.exports = function getBabelConfig(api) {
  api.cache(true)

  const plugins = []

  return {
    presets: ['module:@react-native/babel-preset'],
    plugins,
  }
}

package.json

...
"dependencies": {
    ...
    "react-native": "0.77.0",
    ...
  },
  "devDependencies": {
    "@babel/core": "^7.26.7",
    "@babel/preset-env": "^7.26.7",
    "@babel/runtime": "^7.26.7",
    "@react-native-community/cli": "15.1.3",
    "@react-native-community/cli-platform-android": "15.1.3",
    "@react-native-community/cli-platform-ios": "15.1.3",
    "@react-native/babel-preset": "0.77.0",
    "@react-native/eslint-config": "0.77.0",
    "@react-native/metro-config": "0.77.0",
    "@react-native/typescript-config": "0.77.0",
    "@types/jest": "^29.5.14",
    "@types/react": "^19.0.8",
    "@types/react-test-renderer": "^19.0.0",
    "eslint": "^9.19.0",
    "jest": "^29.7.0",
    "react-test-renderer": "19.0.0",
    "typescript": "5.7.3"
  },
...

I did these commands:

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

[Hariprasanth-HP]

I have fixed it by adding presets: ['module:@react-native/babel-preset'], this in place of presets: ['module:metro-react-native-babel-preset'] in babel.config.js they have removed metro-react-native-babel-preset

I have that already set. Still have the issue

do u have your package.json devDependencies should be like this "devDependencies": { "@babel/core": "^7.26.7", "@babel/preset-env": "^7.26.7", "@babel/runtime": "^7.26.7", "@react-native-community/cli": "15.1.3", "@react-native-community/cli-platform-android": "15.1.3", "@react-native-community/cli-platform-ios": "15.1.3", "@react-native/babel-preset": "0.77.0", "@react-native/eslint-config": "0.77.0", "@react-native/metro-config": "0.77.0", "@react-native/typescript-config": "0.77.0", "@types/jest": "^29.5.14", "@types/react": "^19.0.8", "@types/react-test-renderer": "^19.0.0", "eslint": "^9.19.0", "jest": "^29.7.0", "prettier": "3.4.2", "react-test-renderer": "19.0.0", "typescript": "5.7.3" }, delete node module reset cache and then start

Your solution works! I have:

node -v: v22.13.1 npm -v: v11.1.0

babel.config.js

module.exports = function getBabelConfig(api) { api.cache(true)

const plugins = []

return { presets: ['module:@react-native/babel-preset'], plugins, } } package.json

... "dependencies": { ... "react-native": "0.77.0", ... }, "devDependencies": { "@babel/core": "^7.26.7", "@babel/preset-env": "^7.26.7", "@babel/runtime": "^7.26.7", "@react-native-community/cli": "15.1.3", "@react-native-community/cli-platform-android": "15.1.3", "@react-native-community/cli-platform-ios": "15.1.3", "@react-native/babel-preset": "0.77.0", "@react-native/eslint-config": "0.77.0", "@react-native/metro-config": "0.77.0", "@react-native/typescript-config": "0.77.0", "@types/jest": "^29.5.14", "@types/react": "^19.0.8", "@types/react-test-renderer": "^19.0.0", "eslint": "^9.19.0", "jest": "^29.7.0", "react-test-renderer": "19.0.0", "typescript": "5.7.3" }, ... I did these commands:

npm cache clean --force rm -rf node_modules package-lock.json npm install

Works for me

[shawnlauzon]

Just to be clear, the solution is to add "module:@react-native/babel-preset" to your babel.config.js:

module.exports = function (api) {
...
  return {
   presets: [
      ...
      "module:@react-native/babel-preset",
      ...
    ],
   ...
  };
};

[Naveenkumar-1411]

for me also has the same problem

[bekatd]

I'm facing exact same issue after upgrading from React Native 0.76.x to 0.78. Before this, I encountered the error More than one plugin attempted to override parsing, caused by babel-plugin-syntax-hermes-parser, which I resolved by adding a custom resolution to disable the plugin.

However, now I'm getting the exact same error related to this issue:

SyntaxError: /path/to/ActivityIndicator.js: Missing initializer in const declaration. (156:41) 154 | */ 155 |

156 | const ActivityIndicatorWithRef: component( | ^ 157 | ref: React.RefSetter<HostComponent>, 158 | ...props: Props 159 | ) = React.forwardRef(ActivityIndicator);

All dependencies appear to be correctly versioned, but I'm still encountering this issue. Any suggestions on what might be going wrong?

[jayantamadhav]

'module:@react-native/babel-preset'

This fixes the issue for me, make sure to clean the caches before you start metro and build

[bekatd]

@jayantamadhav I already use @react-native/babel-preset. I've tried clearing caches, verifying versions, and other common fixes, but no luck so far.

[blolo]

@bekatd did you resolve the issue?

[bekatd]

@blolo Yes, I resolved it. In my case (strangely enough), I had a Babel config imported into babel.config.json from a third-party lib we developed. For some reason, the paths weren’t resolved correctly. I fixed it by moving the Babel config from the lib into a local babel.config.js, and everything worked smoothly after that.

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[cvincentcoleman]

After a lot of head scratching npm cache clean --force did the trick for me. Thank you @vdzeer

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[react-native-bot]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[react-native-bot]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.