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 Native: Unexpected token ':'. Expected a ')' or a ',' after a parameter declaration. #14139

Closed
1 task
rishabh876 opened this issue Jan 12, 2022 · 52 comments
Closed
1 task
Labels
outdated A closed issue/PR that is archived due to age. Recommended to make a new issue

Comments

@rishabh876
Copy link

rishabh876 commented Jan 12, 2022

EDIT by @nicolo-ribaudo: If you see this error in React Native, you probably need to update metro-react-native-babel-preset and run yarn start --reset-cache or npx react-native start --reset-cache - #14139 (comment).


💻

  • Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

devDependencies: {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@babel/runtime": "^7.5.5",
}

Configuration file name

package.json

Configuration

"babel": {
    "env": {
      "production-web": {
        "presets": [
          "module:metro-react-native-babel-preset",
          "@babel/preset-env",
          "@babel/preset-react",
          "@babel/preset-flow"
        ],
        "plugins": [
          [
            "babel-plugin-react-native-web",
            {
              "commonjs": true
            }
          ],
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-transform-runtime",
          [
            "extension-resolver",
            {
              "extensions": [
                ".web.js",
                ".js"
              ]
            }
          ]
        ]
      }
    }
  }

Current and expected behavior

Current behavior
App shows red box with the error:
SyntaxError: Unexpected token ':'. Expected a ')' or a ',' after a parameter declaration.

No Stack

Environment

System:
OS: macOS 11.4
Binaries:
Node: 12.16.1 - ~/Documents/GitHub/unacademy-native/node_modules/.bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.1.0 - ~/Documents/GitHub/unacademy-native/node_modules/.bin/npm
npmPackages:
@babel/core: ^7.5.5 => 7.16.7
@babel/plugin-proposal-class-properties: ^7.0.0 => 7.16.7
@babel/plugin-transform-runtime: ^7.0.0 => 7.16.8
@babel/polyfill: ^7.0.0 => 7.12.1
@babel/preset-env: ^7.0.0 => 7.16.8
@babel/preset-flow: ^7.0.0 => 7.16.7
@babel/preset-react: ^7.0.0 => 7.16.7
@babel/register: ^7.0.0 => 7.16.9
@babel/runtime: ^7.5.5 => 7.16.7
babel-eslint: ^10.0.2 => 10.1.0
babel-loader: ^8.0.0 => 8.2.3
babel-plugin-extension-resolver: https://github.com/GingerBear/babel-plugin-extension-resolver => 0.0.1
babel-plugin-import: 1.7.0 => 1.7.0
babel-plugin-react-native-web: 0.8.9 => 0.8.9
eslint: ^6.1.0 => 6.8.0
metro-react-native-babel-preset: ^0.56.0 => 0.56.4
react-native: 0.61.4 => 0.61.4
webpack: ^4.6.0 => 4.46.0

Possible solution

Forcing all babel dependecies found in package-lock to a version < 7.16.8

"@babel/core": "7.16.5",
    "@babel/code-frame": "7.16.0",
    "@babel/compat-data": "7.16.4",
    "@babel/generator": "7.16.5",
    "@babel/helper-remap-async-to-generator": "7.16.5",
    "@babel/plugin-proposal-class-properties": "7.16.5",
    "@babel/plugin-transform-runtime": "7.16.5",
    "@babel/helper-wrap-function": "7.16.5",
    "@babel/parser": "7.16.6",
    "@babel/runtime-corejs3": "7.16.5",
    "@babel/traverse": "7.16.5",
    "@babel/types": "7.16.0",
    "@babel/plugin-proposal-async-generator-functions": "7.16.5",
    "@babel/plugin-transform-async-to-generator": "7.16.5",
    "@babel/plugin-transform-modules-commonjs": "7.16.5",
    "@babel/plugin-transform-named-capturing-groups-regex": "7.16.5",
    "@babel/plugin-transform-typescript": "7.16.1",
    "@babel/preset-env": "7.16.5",
    "@babel/preset-flow": "7.16.5",
    "@babel/preset-react": "7.16.5",
    "@babel/register": "7.16.5",
    "@babel/runtime": "7.16.5",

Additional context

This started happening since 7.16.8 was release.

Screenshot 2022-01-12 at 1 50 25 PM

@babel-bot
Copy link
Collaborator

Hey @rishabh876! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

@qianqiang2017
Copy link

I have the same problem. When I downgraded @babel/traverse to 7.16.7 my problem was solved.

@babel-bot
Copy link
Collaborator

Hi @rishabh876! This issue is missing some important information we'll need to be able to reproduce this issue.

Please understand that we receive a high volume of issues, and there are only a limited number of volunteers that help maintain this project. The easier it is for us to decipher an issue with the info provided, the more likely it is that we'll be able to help.

Please make sure you have the following information documented in this ticket:

  1. Your Babel configuration (typically from .babelrc or babel.config.js)
  2. The current (incorrect) behavior you're seeing
  3. The behavior you expect
  4. A short, self-contained example

Please provide either a link to the problem via the repl, or if the repl is insufficient, a new and minimal repository with instructions on how to build/replicate the issue.

@nicolo-ribaudo
Copy link
Member

This might be caused by #14105, but unfortunately without a reproduction example it's impossible to know if the bug was actually introduced by that PR. It's the PR that most likely could have changed @babel/traverse's behavior, but it looks unrelated to this error.

@stickor
Copy link

stickor commented Jan 13, 2022

I have some problem React Native 0.61.5

@kerm1it
Copy link

kerm1it commented Jan 13, 2022

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)

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.

@stickor
Copy link

stickor commented Jan 13, 2022

@kerm1it it work for my project . thank you🍺

@nicolo-ribaudo
Copy link
Member

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!

@nicolo-ribaudo nicolo-ribaudo pinned this issue Jan 13, 2022
@nicolo-ribaudo nicolo-ribaudo changed the title [Bug]: Unexpected token ':'. Expected a ')' or a ',' after a parameter declaration. React Native: Unexpected token ':'. Expected a ')' or a ',' after a parameter declaration. Jan 13, 2022
@Rekha16
Copy link

Rekha16 commented Jan 13, 2022

Hi, I have same error tried to update metro-react-native-babel-preset to 0.59.0 but not working for me
following are devDependencies
"@babel/core": "7.6.2",
"@babel/runtime": "7.6.2",
"@react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "6.5.1",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.59.0",
"react-test-renderer": "16.11.0"

Please help
Thank You in Advance

@kerm1it
Copy link

kerm1it commented Jan 13, 2022

Hi, I have same error tried to update metro-react-native-babel-preset to 0.59.0 but not working for me

following are devDependencies

"@babel/core": "7.6.2",

"@babel/runtime": "7.6.2",

"@react-native-community/eslint-config": "0.0.5",

"babel-jest": "24.9.0",

"eslint": "6.5.1",

"jest": "24.9.0",

"metro-react-native-babel-preset": "0.59.0",

"react-test-renderer": "16.11.0"

Please help

Thank You in Advance

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

@leandrovidal56
Copy link

leandrovidal56 commented Jan 13, 2022

hi, I continues the same error, I try update this libraries, but not resolved my problem

"@babel/core": "7.16.5",
"@babel/preset-flow": "7.16.5",
"@babel/runtime": "7.16.5",
"@babel/plugin-proposal-decorators": "^7.6.0",
"babel-jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.59.0",
"@babel/traverse": "7.16.5"

I'm try this steps:

rm -rf node_modules
rm -rf yarn.lock
yarn
yarn start --reset-cache

but the problem is not resolved
image

@qianqiang2017
Copy link

hi, I continues the same error, I try update this libraries, but not resolved my problem

"@babel/core": "7.16.5", "@babel/preset-flow": "7.16.5", "@babel/runtime": "7.16.5", "@babel/plugin-proposal-decorators": "^7.6.0", "babel-jest": "^24.9.0", "metro-react-native-babel-preset": "^0.59.0", "@babel/traverse": "7.16.5"

I'm try this steps:

rm -rf node_modules rm -rf yarn.lock yarn yarn start --reset-cache

but the problem is not resolved image

me too!

@Rekha16
Copy link

Rekha16 commented Jan 13, 2022

Hi, I have same error tried to update metro-react-native-babel-preset to 0.59.0 but not working for me
following are devDependencies
"@babel/core": "7.6.2",

"@babel/runtime": "7.6.2",

"@react-native-community/eslint-config": "0.0.5",

"babel-jest": "24.9.0",

"eslint": "6.5.1",

"jest": "24.9.0",

"metro-react-native-babel-preset": "0.59.0",

"react-test-renderer": "16.11.0"

Please help
Thank You in Advance

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

tried to reset cache but still facing same error
please help

@kerm1it
Copy link

kerm1it commented Jan 13, 2022

Hi, I have same error tried to update metro-react-native-babel-preset to 0.59.0 but not working for me

following are devDependencies

"@babel/core": "7.6.2",

"@babel/runtime": "7.6.2",

"@react-native-community/eslint-config": "0.0.5",

"babel-jest": "24.9.0",

"eslint": "6.5.1",

"jest": "24.9.0",

"metro-react-native-babel-preset": "0.59.0",

"react-test-renderer": "16.11.0"

Please help

Thank You in Advance

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

tried to reset cache but still facing same error

please help

can you print your babel.config.js and run npm ls metro-react-native-babel-preset?

@kerm1it
Copy link

kerm1it commented Jan 13, 2022

@Rekha16 @leandrovidal56 @qianqiang2017

Please read #14139 (comment) again to try other solutions.

@Rekha16
Copy link

Rekha16 commented Jan 13, 2022

@Rekha16 @leandrovidal56 @qianqiang2017

Please read #14139 (comment) again to try other solutions.

Thank You Very much I will try this solution

@nicolo-ribaudo
Copy link
Member

If the solution doesn't work, we will need a repository that we can use to reproduce the bug.

@leandrovidal56
Copy link

@Rekha16 @leandrovidal56 @qianqiang2017

Please read #14139 (comment) again to try other solutions.

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

image

image

image

image

image

@kerm1it
Copy link

kerm1it commented Jan 13, 2022

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

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

image image image image image

I guess it is caused by cache (ensure you restart app with yarn start --reset-cache and #14139 (comment) these solutions you only use one of them,don't use mix up with them )

@leandrovidal56
Copy link

leandrovidal56 commented Jan 13, 2022

@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

@hau1412
Copy link

hau1412 commented Jan 17, 2022

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)

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

@nicolo-ribaudo
Copy link
Member

nicolo-ribaudo commented Feb 22, 2022

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.

@younasm
Copy link

younasm commented Feb 22, 2022

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!🙌🏻✌🏻

@pprathameshmore
Copy link

pprathameshmore commented Feb 28, 2022

  • npx react-native start --reset-cache

I tried this solution but had no luck.

Getting following error:

image

Dependencies:

image

Babel config:

image

mariasenosiain added a commit to getyoti/yoti-doc-scan-react-native that referenced this issue Mar 9, 2022
Previous version was causing a crash when the App was launched in both: iOS & Android
More info here: babel/babel#14139 (comment)

Related to YD-4110
@raxa15
Copy link

raxa15 commented Mar 21, 2022

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)

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.

@idn-usmanmustafa
Copy link

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)

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 bro. This solved my error.

@rexcode
Copy link

rexcode commented Apr 19, 2022

@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

react-native version = 0.63.2
npx react-native start --reset-cache
this command worked for me, thanks

@GuoZhiQiang
Copy link

Update metro-react-native-babel-preset from 0.58.0 to 0.59.0 in package.json file and then yarn react-native run-ios worked for me

@KrushnaNaghate
Copy link

KrushnaNaghate commented Apr 25, 2022

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

@nachoSource
Copy link

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

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

I guess it is caused by cache (ensure you restart app with yarn start --reset-cache and #14139 (comment) these solutions you only use one of them,don't use mix up with them )

I just copy&pasted these files & npx react-native start --reset-cache and it finally worked
Thanks!

@hakan-lekesiz
Copy link

yarn start --reset-cache this line save my life after days

@SyedSaifAli
Copy link

Any update on this?
Tried all the solutions mentioned above, none is working for me.

@rishabh876
Copy link
Author

@SyedSaifAli can you share your babel config and where it is defined. For me it did not work if its defined inside package.json.

@SyedSaifAli
Copy link

SyedSaifAli commented Jun 27, 2022

@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

@SyedSaifAli
Copy link

SyedSaifAli commented Jun 29, 2022

Creating babel.config.js solved the problem.
Inside that added what @raxa15 commented here and it worked!

Thanks @raxa15

@AFDHAL2009
Copy link

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

@umesh40047
Copy link

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

This worked for me, Thank you so much, follow these steps one by one.

@raj-ecarter
Copy link

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)

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.

Really helpful.

@CRodz13
Copy link

CRodz13 commented May 4, 2023

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.

@aurangs7
Copy link

yarn add -D metro-react-native-babel-preset
and
yarn start --reset-cache

Saved me (Trying for the last 6 days) was tired... still can't believe this happened to me. :D

@msaifa
Copy link

msaifa commented Jul 31, 2023

this very helpfull... thanks a lot for ur comment

@github-actions github-actions bot added the outdated A closed issue/PR that is archived due to age. Recommended to make a new issue label Oct 31, 2023
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 31, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
outdated A closed issue/PR that is archived due to age. Recommended to make a new issue
Projects
None yet
Development

No branches or pull requests