babel: React Native: Unexpected token ':'. Expected a ')' or a ',' after a parameter declaration.

I have the same problem. This is caused by #14105.

Because of https://github.com/facebook/metro/blob/v0.58.0/packages/metro-react-native-babel-preset/src/transforms/transform-symbol-member.js#L52 will transform Symbol.iterator, but the change of #14105 will cause transform is break, finally the rest flow grammar is reserved.

Please update metro-react-native-babel-preset from 0.58.0 to 0.59.0 to resolve it.

If it doesn’t take effect, please try yarn start --reset-cache to restart app.

And other two solutions: (only use one of)

• use resolutions of yarn to lock @babel/traverse to 7.16.7 (https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/#toc-how-to-use-it) and run yarn to reinstall, finally run yarn start --reset-cache to restart app.
• update babel.config.js of your project : (assume your metro-react-native-babel-preset is 0.58.0)

from:

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

to:

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

finally run yarn start --reset-cache to restart app.

@Rekha16 @leandrovidal56 @qianqiang2017 Please read #14139 (comment) again to try other solutions.

thank you @kerm1it, I find possible solution, it’s good for me depends your machine you need use this command

• npx react-native start --reset-cache

I have the same problem. This is caused by #14105.

Because of https://github.com/facebook/metro/blob/v0.58.0/packages/metro-react-native-babel-preset/src/transforms/transform-symbol-member.js#L52 will transform Symbol.iterator, but the change of #14105 will cause transform is break, finally the rest flow grammar is reserved.

Please update metro-react-native-babel-preset from 0.58.0 to 0.59.0 to resolve it.

If it doesn’t take effect, please try yarn start --reset-cache to restart app.

And other two solutions: (only use one of)

• use resolutions of yarn to lock @babel/traverse to 7.16.7 (https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/#toc-how-to-use-it) and run yarn to reinstall, finally run yarn start --reset-cache to restart app.
• update babel.config.js of your project : (assume your metro-react-native-babel-preset is 0.58.0)

from:

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

to:

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

finally run yarn start --reset-cache to restart app.

Thanks guy, it work

I have some problem React Native 0.61.5

#14139 These steps worked for me-

1. In cmd echo $TMPDIR
2. Go to path and remove metro-cache (rm -r metro-cache)
3. remove node modules, package-lock
4. npm cache clean --force
5. upgrade metro-react-native-babel-preset version to 0.59.0
6. npm install
7. npm start – --reset-cache

Guys, thank you all so much for helping to resolve the problem. This is what helped me:

1. I deleted node_modules
2. I added to package.json

 "devDependencies": {
    "@babel/core": "7.16.7",
    "@babel/preset-flow": "7.16.7",
    "@babel/runtime": "7.16.7",
    "@babel/traverse": "7.16.7",
    "metro-react-native-babel-preset": "^0.59.0",
 },
 "resolutions": {
    "@babel/traverse": "7.16.7"
  },

1. I added to babel.config.js

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

1. I run npm i --legacy-peer-deps
2. cd android && gradlew clean
3. cd ..
4. react-native run-android
5. react-native start --reset-cache

I hope it will help those who still trying to make it work. Take care and thanks again for all the previous answers.

Guys, thank you all so much for helping to resolve the problem. This is what helped me:

1. I deleted node_modules
2. I added it to package.json

 "devDependencies": {
    "@babel/core": "7.16.7",
    "@babel/preset-flow": "7.16.7",
    "@babel/runtime": "7.16.7",
    "@babel/traverse": "7.16.7",
    "metro-react-native-babel-preset": "^0.59.0",
 },
 "resolutions": {
    "@babel/traverse": "7.16.7"
  },

1. I added to babel.config.js

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

1. I run npm i --legacy-peer-deps
2. cd android && gradlew clean
3. cd ..
4. react-native run-android
5. react-native start --reset-cache

I hope it will help those who still trying to make it work. Take care and thanks again for all the previous answers.

hey thank you so much, it works …

I have the same problem. This is caused by #14105.

Because of https://github.com/facebook/metro/blob/v0.58.0/packages/metro-react-native-babel-preset/src/transforms/transform-symbol-member.js#L52 will transform Symbol.iterator, but the change of #14105 will cause transform is break, finally the rest flow grammar is reserved.

Please update metro-react-native-babel-preset from 0.58.0 to 0.59.0 to resolve it.

If it doesn’t take effect, please try yarn start --reset-cache to restart app.

And other two solutions: (only use one of)

• use resolutions of yarn to lock @babel/traverse to 7.16.7 (https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/#toc-how-to-use-it) and run yarn to reinstall, finally run yarn start --reset-cache to restart app.
• update babel.config.js of your project : (assume your metro-react-native-babel-preset is 0.58.0)

from:

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

to:

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

finally run yarn start --reset-cache to restart app.

Working for me.

Oh thanks @kerm1it for investigating! We have some e2e tests to verify that we don’t break React Native support, but we are only testing recent versions and metro-react-native-babel-preset 0.58.0 is two years old 😅

Since #14105 is a fix for an actual bug, and the metro-react-native-babel-preset code you linked is clearly wrong (it asks Babel to stop the whole traversal with path.stop(), rather than just to avoid recursing in the current node with path.skip()), I’m tempted to leave the situation as-is.

I will pin this issue for now, so that if anyone has the same problem they will see your suggested solution (i.e. update metro-react-native-babel-preset). Thank you!

Update babel-preset-expo to 8.3.0 or a newer version. Then you might need to clear expo’s cache, if it has one.

Thank you So much. it helped me out. my error is gone.

I updated: "babel-preset-expo": "~8.1.0" to "babel-preset-expo": "~8.3.0" then run: expo start -c

everything come back to life Happy coding!🙌🏻✌🏻

Update babel-preset-expo to 8.3.0 or a newer version. Then you might need to clear expo’s cache, if it has one.

for those having this issue, simple adding “babel-preset-expo”: “~8.3.0” alone to my project fixed this error. “@babel/core”: “^7.8.6”, is all i had.

npx react-native start --reset-cache this command fixed my issue thanks guys

@rishabh876 sure, here it is

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

This is the babel.config.js file stored at node_modules/react-native/template/babel.config.js

@Rekha16 @leandrovidal56 @qianqiang2017 Please read #14139 (comment) again to try other solutions.

thank you @kerm1it, but I don’t have success yet

I guess it is caused by cache (ensure you restart app with yarn start --reset-cache and https://github.com/babel/babel/issues/14139#issuecomment-1011836916 these solutions you only use one of them，don’t use mix up with them )