Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React.forwardRef(ActivityIndicator) issue #49056

Open
shijoavb opened this issue Jan 30, 2025 · 17 comments
Open

React.forwardRef(ActivityIndicator) issue #49056

shijoavb opened this issue Jan 30, 2025 · 17 comments
Labels
Component: ActivityIndicator Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue.

Comments

@shijoavb
Copy link

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 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
Copy link
Collaborator

Warning

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

@karamanmertcan
Copy link

is there any solution?

@migueldaipre
Copy link
Collaborator

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

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

@ShawnBaek
Copy link

I also encountered the same issues.

Image

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).

Image

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
Copy link

Houdhey commented Feb 1, 2025

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
Copy link

Facing same problem

@CMLCNL
Copy link

CMLCNL commented Feb 3, 2025

/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
Copy link

Shmublon commented Feb 3, 2025

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
Copy link

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
Copy link

pimich0 commented Feb 4, 2025

Facing same problem here

@alihamza1729
Copy link

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
Copy link

nielsq commented Feb 4, 2025

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
Copy link

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

@nielsq
Copy link

nielsq commented Feb 4, 2025

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

@vdzeer
Copy link

vdzeer commented Feb 4, 2025

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
Copy link

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
Copy link

shawnlauzon commented Feb 17, 2025

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",
      ...
    ],
   ...
  };
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: ActivityIndicator Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue.
Projects
None yet
Development

No branches or pull requests