React.forwardRef(ActivityIndicator) issue #49056

shijoavb · 2025-01-30T07:24:46Z

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

The text was updated successfully, but these errors were encountered:

react-native-bot · 2025-01-30T07:25:11Z

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 · 2025-01-30T12:38:20Z

is there any solution?

migueldaipre · 2025-01-30T14:56:10Z

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

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

ShawnBaek · 2025-02-01T15:05:43Z

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 · 2025-02-01T21:19:30Z

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 · 2025-02-03T11:14:38Z

Facing same problem

CMLCNL · 2025-02-03T19:58:59Z

/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 · 2025-02-03T23:06:15Z

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 · 2025-02-03T23:13:54Z

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 · 2025-02-04T04:45:26Z

Facing same problem here

alihamza1729 · 2025-02-04T05:48:48Z

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 · 2025-02-04T07:43:43Z

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 · 2025-02-04T07:48:57Z

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 · 2025-02-04T12:39:00Z

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

vdzeer · 2025-02-04T12:46:50Z

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 · 2025-02-16T04:08:24Z

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 · 2025-02-17T14:40:10Z

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 · 2025-02-23T16:56:27Z

for me also has the same problem

bekatd · 2025-02-25T10:52:47Z

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 · 2025-02-26T04:29:46Z

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

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

bekatd · 2025-02-26T11:29:20Z

@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 · 2025-03-09T00:19:13Z

@bekatd did you resolve the issue?

shijoavb added the Needs: Triage 🔍 label Jan 30, 2025

react-native-bot added Component: ActivityIndicator Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Jan 30, 2025

react-native-bot removed the Needs: Triage 🔍 label Jan 30, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React.forwardRef(ActivityIndicator) issue #49056

React.forwardRef(ActivityIndicator) issue #49056

shijoavb commented Jan 30, 2025

react-native-bot commented Jan 30, 2025

karamanmertcan commented Jan 30, 2025

migueldaipre commented Jan 30, 2025

ShawnBaek commented Feb 1, 2025

Houdhey commented Feb 1, 2025

alihamza1729 commented Feb 3, 2025

CMLCNL commented Feb 3, 2025

Shmublon commented Feb 3, 2025

prashilak commented Feb 3, 2025

pimich0 commented Feb 4, 2025

alihamza1729 commented Feb 4, 2025

nielsq commented Feb 4, 2025

alihamza1729 commented Feb 4, 2025 •

edited

Loading

nielsq commented Feb 4, 2025

vdzeer commented Feb 4, 2025 •

edited

Loading

Hariprasanth-HP commented Feb 16, 2025

shawnlauzon commented Feb 17, 2025 •

edited

Loading

Naveenkumar-1411 commented Feb 23, 2025

bekatd commented Feb 25, 2025

jayantamadhav commented Feb 26, 2025

bekatd commented Feb 26, 2025

blolo commented Mar 9, 2025

React.forwardRef(ActivityIndicator) issue #49056

React.forwardRef(ActivityIndicator) issue #49056

Comments

shijoavb commented Jan 30, 2025

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx react-native info

Stacktrace or Logs

Reproducer

Screenshots and Videos

react-native-bot commented Jan 30, 2025

karamanmertcan commented Jan 30, 2025

migueldaipre commented Jan 30, 2025

ShawnBaek commented Feb 1, 2025

Houdhey commented Feb 1, 2025

alihamza1729 commented Feb 3, 2025

CMLCNL commented Feb 3, 2025

Shmublon commented Feb 3, 2025

prashilak commented Feb 3, 2025

pimich0 commented Feb 4, 2025

alihamza1729 commented Feb 4, 2025

nielsq commented Feb 4, 2025

alihamza1729 commented Feb 4, 2025 • edited Loading

nielsq commented Feb 4, 2025

vdzeer commented Feb 4, 2025 • edited Loading

Hariprasanth-HP commented Feb 16, 2025

shawnlauzon commented Feb 17, 2025 • edited Loading

Naveenkumar-1411 commented Feb 23, 2025

bekatd commented Feb 25, 2025

jayantamadhav commented Feb 26, 2025

bekatd commented Feb 26, 2025

blolo commented Mar 9, 2025

Output of `npx react-native info`

alihamza1729 commented Feb 4, 2025 •

edited

Loading

vdzeer commented Feb 4, 2025 •

edited

Loading

shawnlauzon commented Feb 17, 2025 •

edited

Loading