SyntaxError: Missing initializer in const declaration in React Native (ActivityIndicator.js)

Question

I am encountering the following error when running my React Native project:

SyntaxError: D:\Reacting\node_modules\react-native\Libraries\Components\ActivityIndicator\ActivityIndicator.js: Missing initializer in const declaration.

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

The error seems to be related to the ActivityIndicator component, and it's occurring during the build process.

Steps I have tried: Checked Babel Configuration:

I have ensured that my Babel configuration file is set up correctly. Here's my babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

Reset Metro Cache:

I ran the following command to reset the cache:

npx react-native start --reset-cache Reinstalled Node Modules:

I deleted node_modules and the package-lock.json file and reinstalled dependencies with npm install. Downgraded React Native Version:

I tried downgrading React Native to 0.71.11 to see if that would resolve the issue. My current dependencies:

{
 "name": "CtoB",
 "version": "0.0.1",
 "private": true,
 "dependencies": {
   "react-native": "^0.77.0",
   "react": "18.3.1",
   "axios": "^1.7.9"
 },
 "devDependencies": {
   "@babel/core": "^7.26.0",
   "babel-preset-react-native": "^4.0.1"
 }
}

Expected behavior: I expect the project to run without errors, especially when rendering ActivityIndicator.

Additional Information: The issue seems to occur specifically with React Native version 0.77.0. I am using React version 18.3.1. The project setup doesn't use TypeScript, but I am encountering issues related to TypeScript-like syntax.

Questions: Does anyone have a solution for this error related to ActivityIndicator? Is there an issue with the current React Native version or a specific Babel setup?

Answer 1

Please try to run these three steps at the top of your project (or where your package.json file is):

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