node_modules/react-native-reanimated/src/index.ts (7,13): Identifier expected. 'default' is a reserved word that cannot be used here

Description

I would say it’s kind of specific to my project. Cause I tried it with a bare new project and it worked just fine.

I have completed all the steps to use reanimated v2 in my react native project, but I’m getting this error when I start the project. I’m using react-native: 0.64.2, babel: 7.12.9. I have added the plugin to both the .babelrc and babel.config.js files.

node_modules/react-native-reanimated/src/index.ts: node_modules/react-native-reanimated/src/index.ts (7,13): Identifier expected. 'default' is a reserved word that cannot be used here.

package.json

 "dependencies": {
// Others 
    "react": "17.0.1",
    "react-devtools": "^4.5.0",
    **"react-intl": "^5.8.5",
    "react-native": "0.64.2",**
// Others
    "react-native-popup-menu-android": "^1.0.3",
    "react-native-progress": "^5.0.0",
    **"react-native-reanimated": "^2.9.1",**
  // Others
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-decorators": "^7.4.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-typescript": "^7.8.3",
    "@babel/runtime": "^7.12.5",
    "@graphql-codegen/cli": "^1.8.3",
    "@graphql-codegen/introspection": "1.8.3",
    "@graphql-codegen/typescript": "1.8.3",
    "@graphql-codegen/typescript-operations": "1.8.3",
    "@graphql-codegen/typescript-react-apollo": "1.8.3",
    "@react-native-community/cli-platform-ios": "^7.0.1",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/node": "^18.6.5",
    "@types/react": "^16.11.0",
    "@types/react-native": "^0.61.16",
    "@typescript-eslint/eslint-plugin": "^5.27.1",
    "@typescript-eslint/parser": "^5.27.1",
    "babel-eslint": "^8.2.3",
    "babel-jest": "^26.6.3",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-register": "^6.26.0",
    "bugsnag-sourcemaps": "^1.1.0",
    "eslint": "7.14.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-import-resolver-typescript": "^2.7.1",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.9.0",
    "eslint-plugin-react-native": "^3.2.1",
    "extract-react-intl-messages": "^2.3.5",
    "husky": "^0.14.3",
    "jest": "^26.6.3",
    "jest-haste-map": "^23.6.0",
    "lint-staged": "^9.4.2",
    "metro-react-native-babel-preset": "^0.64.0",
    "patch-package": "^6.1.0",
    "prettier": "^2.0.5",
    "react-native-codegen": "0.0.7",
    "react-native-mock": "^0.3.1",
    "react-native-typescript-transformer": "^1.2.13",
    "react-test-renderer": "17.0.1",
    "remote-redux-devtools": "^0.5.16",
    "remotedev-rn-debugger": "^0.8.4",
    "typescript": "^3.9.10"
  },

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '@hocs': './app/screens/private/hoc',
          '@hooks': './app/screens/private/hooks',
          '@styles': './app/styles/index.ts',
          '@components': './app/components',
          '@TranslationProvider': './app/screens/TranslationProvider.tsx',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
}

Steps to reproduce

I would say it’s kind of specific to my project. Cause I tried it with a bare new project and it worked just fine.

1. install react-native-reanimated 2 in a react-native project (No expo)
2. add the plugin
3. Start the app

Snack or a link to a repository

No link / Company project

Reanimated version

2.9.1

React Native version

0.64.2

Platforms

Android, iOS

JavaScript runtime

No response

Workflow

React Native (without Expo)

Architecture

No response

Build type

No response

Device

iOS simulator

Real device model

No response

[SaadAhmadSaddiqui]

Thanks a lot for the reply! So I started the new project with the same typescript version as my companies project, but it still worked. I’m now thinking it may be the tsconfig.json differences. I will try copying those from my new project to the old one and see how that goes and update.

Thanks again!

[sas032]

I had the same issue but adding this snippet in the babel.config.js file solved this for me:

module.exports = function(api) { api.cache(true); return { presets: [‘module:metro-react-native-babel-preset’], plugins: [‘react-native-reanimated/plugin’], }; };