SyntaxError in node_modules/react-native/src/private/animated/NativeAnimatedHelper.js: '}' #1382

mrouah-qualisocial · 2024-11-07T13:08:42Z

Do you want to request a feature or report a bug?

bug

What is the current behavior?

after bundle.js compilation throw SyntaxError

SyntaxError in node_modules/react-native/src/private/animated/NativeAnimatedHelper.js: '}' expected at end of object literal '{...' (138:9)
}) as $NonMaybeType['getValue'],
^
note: location of '{' (126:12)
const API = {

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

System:
OS: macOS 14.2.1
CPU: (10) arm64 Apple M2 Pro
Memory: 98.05 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.18.2
path: /usr/local/bin/node
Yarn:
version: 1.22.22
path: /usr/local/bin/yarn
npm:
version: 10.9.0
path: ~/dev/qualicare_0_76_1/node_modules/.bin/npm
Watchman:
version: 2024.04.01.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.5
- iOS 17.5
- macOS 14.5
- tvOS 17.5
- visionOS 1.2
- watchOS 10.5
Android SDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.15989.150.2411.11948838
Xcode:
version: 15.4/15F31d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.21
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.0.0
wanted: 15.0.0
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.76.1
wanted: 0.76.1
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true

tylerku · 2024-11-08T04:23:28Z

I am also experiencing this. Just upgraded my app to use React Native 0.76.1

mrouah-qualisocial · 2024-11-08T11:07:15Z

same error with React Native 0.76.1

huntie · 2024-11-08T13:09:06Z

Related to facebook/react-native#46601.

nchkr · 2024-11-13T18:38:07Z

@huntie any updates on this issue ?

huntie · 2024-11-13T18:43:48Z

@nchkr This should be fixed as of React Native 0.76.1. Please update all your @react-native/* deps (the fix is part of @react-native/babel-preset).

nchkr · 2024-11-13T19:22:02Z

After updating RN to 0.76.1 still getting the same error :

SyntaxError: /node_modules/react-native/src/private/animated/NativeAnimatedHelper.js: Unexpected token, expected "," (138:9)

  136 |     : (tag, saveValueCallback) => {
  137 |         NativeOperations.getValue(tag, saveValueCallback);
> 138 |       }) as $NonMaybeType<typeof NativeAnimatedModule>['getValue'],
      |          ^
  139 |
  140 |   setWaitingForIdentifier(id: string): void {
  141 |     waitingForQueuedOperations.add(id);

NoodleOfDeath · 2024-11-15T13:57:40Z

Yup getting the same error too. I am downgrading back to 0.73.4

DimitarNestorov · 2024-11-18T17:52:04Z

@nchkr @NoodleOfDeath please update babel.config.js

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

Unn4m3DD · 2024-11-21T15:22:21Z

The babel.config.js alone did not fix it on my side. It had to do with react-native-svg-transformer. I npm i react-native-svg-transformer@latest and it started working

adityaranjan006 · 2024-11-25T07:09:12Z

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**

Metro configuration
https://facebook.github.io/metro/docs/configuration
@type {import('metro-config').MetroConfig}
*/
const config = {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer"),

assetPlugins: ["expo-asset/tools/hashAssetFiles"],
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "json", "svg"],
},
};

module.exports = mergeConfig(defaultConfig, config);

adityaranjan006 · 2024-11-25T07:09:42Z

Cannot resolve the issue Please Help. This is my metro.config.js and Bable.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};

smfunder · 2024-11-27T01:39:36Z

In my case it turns that re-running metro bundler it just worked for me:
yarn start --reset-cache

RN 0.76.3
package.json

  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.23.6",
    "@react-native-community/cli": "15.0.0",
    "@react-native-community/cli-platform-android": "15.0.0",
    "@react-native-community/cli-platform-ios": "15.0.0",
    "@react-native/babel-preset": "0.76.3",
    "@react-native/eslint-config": "0.76.3",
    "@react-native/metro-config": "0.76.3",
    "@react-native/typescript-config": "0.76.3",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^8.57.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "jest": "^29.6.3",
    "metro-react-native-babel-preset": "^0.77.0",
    "patch-package": "^7.0.2",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "^2.8.8",
    "react-native-dotenv": "^3.4.11",
    "react-test-renderer": "18.3.1",
    "typescript": "5.3.3"
  },

babel.config.js

module.exports = function (api) {
  api.cache(false);
  return {
    presets: ['module:@react-native/babel-preset'],
    plugins: [
      'react-native-reanimated/plugin',
      ['module:react-native-dotenv', {
        envName: 'APP_ENV',
        moduleName: '@env',
        path: '.env'
      }]
    ]
  }
}

obydog002 · 2024-11-27T13:23:12Z

Any tips to debug if/which packages may cause this? Clearing the metro bundler didn't work, along with other potential solutions posted here.

DiguinhoLNS · 2024-11-27T15:12:19Z

Experiencing the same error on React Native 0.76.3

smfunder · 2024-11-27T16:36:43Z

@obydog002 @DiguinhoLNS did you closed metro console and open it again with yarn start --reset-cache?

robhogan · 2024-11-27T19:30:06Z

This should be fixed in RN 0.76.3 with hermesParser: false in metro.config.js. Please see facebook/hermes#1549 (comment)

Could anyone still experiencing this after reading the above please post their:

package.json
metro.config.js
babel.config.js (or other Babel config)
yarn why @react-native/babel-preset
yarn why metro

Or even better, a repo I can clone that reproduces this issue.

Context: The issue arises when using Babel parser without the Hermes syntax plugin, which is required to parse modern Flow (including the as keyword). This should be automatically set up by @react-native/babel-preset, which should match your react-native version and be up-to-date.

adityaranjan006 · 2024-11-29T17:23:01Z

package.json:
metro.config.js
`const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**

Metro configuration
https://facebook.github.io/metro/docs/configuration
@type {import('metro-config').MetroConfig}
*/
const config = {
transformer: {
hermesParser:false,
babelTransformerPath: require.resolve("react-native-svg-transformer"),

assetPlugins: ["expo-asset/tools/hashAssetFiles"],
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "json", "svg"],
},
};

module.exports = mergeConfig(defaultConfig, config);
Babnel.config.jsonmodule.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
`

I tried with hermesParser:false, I'm using expo after upgrading from 51.0.0 to 52.x.x I ran into the issue, node_modules/react-native/src/private/animated/NativeAnimatedHelper.js: '}'

adityaranjan006 · 2024-11-29T17:24:00Z

  "name": "frontend",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "ts:check": "tsc",
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/metro-runtime": "~3.2.1",
    "@react-native/metro-config": "^0.73.5",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "axios": "^1.6.7",
    "colorsys": "^1.0.22",
    "expo": "^51.0.0",
    "expo-asset": "~10.0.9",
    "expo-dev-client": "~4.0.18",
    "expo-font": "~12.0.7",
    "expo-haptics": "~13.0.1",
    "expo-linear-gradient": "~13.0.2",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.2",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-ios-kit": "^0.0.22",
    "react-native-loading-spinner-overlay": "^3.0.1",
    "react-native-progress": "^5.0.1",
    "react-native-reanimated": "^3.16.1",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-svg": "15.2.0",
    "react-native-svg-path-gradient": "^0.4.0",
    "react-native-toast-message": "^2.2.0",
    "react-native-vector-icons": "^10.2.0",
    "react-native-web": "~0.19.6",
    "toggle-switch-react-native": "^3.3.0",
    "use-debounce": "^10.0.0",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "react-native-svg-transformer": "^1.3.0",
    "typescript": "~5.3.3"
  },
  "private": true
}
`

robhogan · 2024-11-29T17:31:03Z

Ah, could well be that babel-preset-expo doesn’t include babel-plugin-syntax-hermes-parser.

Could you try
yarn add babel-plugin-syntax-hermes-parser
And add 'babel-plugin-syntax-hermes-parser' as the first entry in babel.config.js plugins?

robhogan · 2024-11-29T17:36:35Z

For RN 0.76.3 in an Expo project, ensure that you have babel-preset-expo at 12.0.2 or later (check with yarn why babel-preset-expo)

hamzaaftab · 2024-11-29T22:47:11Z

Had this issue and somehow it went away after deleting and regenerating package-lock.json

~~Running into this even after:~~

~~Ensuring babel-preset-expo is at 12.0.2~~
~~RN is 0.76.3~~
~~hermesParser is set to false in metro.config.js~~
~~Have tried expo start --reset-cache option~~

Files:

package.json (relevant sections):

{
  "dependencies": {
    "@sentry/react-native": "^5.33.0",
    "babel-plugin-syntax-hermes-parser": "^0.25.1",
    "babel-preset-expo": "^12.0.2",
    "expo": "^52.0.11",
    "react": "^18.3.1",
    "react-native": "^0.76.3",
    "react-native-paper": "^5.12.3",
    "react-native-reanimated": "^3.16.3",
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "metro-react-native-babel-transformer": "^0.77.0",
    "react-native-svg-transformer": "^1.5.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3"
  }
}

metro.config.js:

/* eslint-disable require-unicode-regexp */
/* eslint-disable @typescript-eslint/no-var-requires */

const path = require("path");

const { getSentryExpoConfig } = require("@sentry/react-native/metro");

module.exports = (() => {
  const config = getSentryExpoConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    hermesParser: false,
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter(ext => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"],
  };

  return config;
})();

babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    env: {
      production: {
        plugins: ["react-native-paper/babel"],
      },
    },
    plugins: [
      ["babel-plugin-syntax-hermes-parser"],
      [
        "module-resolver",
        {
          extensions: [".ts", ".tsx", ".js", ".jsx"],
          root: ["./"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

npm why babel-preset-expo
babel-preset-expo@12.0.2

obydog002 · 2024-12-02T14:17:20Z

In my case with expo 52 this was fixed after using babel-preset-expo

babel.config.js

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'],
};

metro.config.js

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  
/**
 * Metro configuration
 * https://reactnative.dev/docs/metro 
 *  
 * @type {import('metro-config').MetroConfig}
 */ 
const config = {transformer: {hermesParser: false}};
    
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

package.json excerpt

"@babel/preset-env": "^7.25.3",
"babel-plugin-syntax-hermes-parser": "^0.25.1",
"babel-preset-expo": "^12.0.2"

Thanks

Andrey123815 · 2024-12-03T18:34:02Z

Related to facebook/react-native#46601.

Hello! I can't find answer that can help with this problem:
SyntaxError in node_modules/react-native/src/private/animated/NativeAnimatedHelper.js: '}'

I see not compilied TypeScript code in javascript file and I think that this will only be solved by re-uploading a fully compiled library. Am I right and what is the time frame for solving the problem? Could you guess?

Upd: i drop all types from js file and this error disappeared, but come on other errors from other js-files with not compiled typescript code

rageofaxe · 2024-12-04T14:38:04Z

I guess this error due to wrong babelTransformerPath in metro.config.js
Look carifully at your metro.config.js
For react-native > 0.72 must be:

babelTransformerPath: require.resolve("react-native-svg-transformer/react-native"),

at least it works for me :)

robhogan · 2024-12-04T15:42:40Z

I guess this error due to wrong babelTransformerPath in metro.config.js Look carifully at your metro.config.js For react-native > 0.72 must be:

babelTransformerPath: require.resolve("react-native-svg-transformer/react-native"),

at least it works for me :)

This isn’t the case in general - the default setting should work.

Is everyone still experiencing this problem using reanimated? I see a few of you are.

galbenyosef · 2024-12-24T14:33:17Z

I guess this error due to wrong babelTransformerPath in metro.config.js Look carifully at your metro.config.js For react-native > 0.72 must be:

babelTransformerPath: require.resolve("react-native-svg-transformer/react-native"),

at least it works for me :)

This helped me after installing expo into bare project (which is using svg) and upgrading it to the latest expo (52.0.23)

huntie self-assigned this Nov 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SyntaxError in node_modules/react-native/src/private/animated/NativeAnimatedHelper.js: '}' #1382

SyntaxError in node_modules/react-native/src/private/animated/NativeAnimatedHelper.js: '}' #1382

mrouah-qualisocial commented Nov 7, 2024

tylerku commented Nov 8, 2024

mrouah-qualisocial commented Nov 8, 2024

huntie commented Nov 8, 2024

nchkr commented Nov 13, 2024

huntie commented Nov 13, 2024 •

edited

Loading

nchkr commented Nov 13, 2024

NoodleOfDeath commented Nov 15, 2024 •

edited

Loading

DimitarNestorov commented Nov 18, 2024

Unn4m3DD commented Nov 21, 2024

adityaranjan006 commented Nov 25, 2024

adityaranjan006 commented Nov 25, 2024 •

edited

Loading

smfunder commented Nov 27, 2024

obydog002 commented Nov 27, 2024

DiguinhoLNS commented Nov 27, 2024

smfunder commented Nov 27, 2024

robhogan commented Nov 27, 2024 •

edited

Loading

adityaranjan006 commented Nov 29, 2024 •

edited

Loading

adityaranjan006 commented Nov 29, 2024

robhogan commented Nov 29, 2024

robhogan commented Nov 29, 2024

hamzaaftab commented Nov 29, 2024 •

edited

Loading

obydog002 commented Dec 2, 2024

Andrey123815 commented Dec 3, 2024 •

edited

Loading

rageofaxe commented Dec 4, 2024

robhogan commented Dec 4, 2024

galbenyosef commented Dec 24, 2024 •

edited

Loading

SyntaxError in node_modules/react-native/src/private/animated/NativeAnimatedHelper.js: '}' #1382

SyntaxError in node_modules/react-native/src/private/animated/NativeAnimatedHelper.js: '}' #1382

Comments

mrouah-qualisocial commented Nov 7, 2024

tylerku commented Nov 8, 2024

mrouah-qualisocial commented Nov 8, 2024

huntie commented Nov 8, 2024

nchkr commented Nov 13, 2024

huntie commented Nov 13, 2024 • edited Loading

nchkr commented Nov 13, 2024

NoodleOfDeath commented Nov 15, 2024 • edited Loading

DimitarNestorov commented Nov 18, 2024

Unn4m3DD commented Nov 21, 2024

adityaranjan006 commented Nov 25, 2024

adityaranjan006 commented Nov 25, 2024 • edited Loading

smfunder commented Nov 27, 2024

obydog002 commented Nov 27, 2024

DiguinhoLNS commented Nov 27, 2024

smfunder commented Nov 27, 2024

robhogan commented Nov 27, 2024 • edited Loading

adityaranjan006 commented Nov 29, 2024 • edited Loading

adityaranjan006 commented Nov 29, 2024

robhogan commented Nov 29, 2024

robhogan commented Nov 29, 2024

hamzaaftab commented Nov 29, 2024 • edited Loading

obydog002 commented Dec 2, 2024

Andrey123815 commented Dec 3, 2024 • edited Loading

rageofaxe commented Dec 4, 2024

robhogan commented Dec 4, 2024

galbenyosef commented Dec 24, 2024 • edited Loading

huntie commented Nov 13, 2024 •

edited

Loading

NoodleOfDeath commented Nov 15, 2024 •

edited

Loading

adityaranjan006 commented Nov 25, 2024 •

edited

Loading

robhogan commented Nov 27, 2024 •

edited

Loading

adityaranjan006 commented Nov 29, 2024 •

edited

Loading

hamzaaftab commented Nov 29, 2024 •

edited

Loading

Andrey123815 commented Dec 3, 2024 •

edited

Loading

galbenyosef commented Dec 24, 2024 •

edited

Loading