Hitting this error when building for react native 0.62.2.
error node_modules/react-native/Libraries/Blob/URL.js: Unexpected token punc «:», expected punc «,» in file node_modules/react-native/Libraries/Blob/URL.js at 104:30. Run CLI with --verbose flag for more details. Error: Unexpected token punc «:», expected punc «,» in file node_modules/react-native/Libraries/Blob/URL.js at 104:30
Tried removing node_modules and yarn.lock, but to no avail. :(
Issue is due to metro-react-native-babel-preset. update it to "metro-react-native-babel-preset": "^0.66.2"
The accepted answer by Ashok provides a solution that works.
If you are interested in more details, as well as alternative ways to fix it, please read on.
Upgrading to the latest version of metro-react-native-babel-preset is not necessary. It could potentially lead to other other compatibility problems. The error was fixed in 0.59, which first shipped with React Native 0.63. If you are using an older version of React Native, it is possible that you are still locked to a version <0.59.
Option 1 Upgrade metro-react-native-babel-preset at least to 0.59:
yarn add -D metro-react-native-babel-preset@^0.59
Now to the additional details and root cause of this build error. The origins can be traced back to the release of Babel 7.16.8 on January 10, 2022. This StackOverflow question was created the following day, Jan 11. @babel/traverse@7.16.8 includes the following PR:
https://github.com/babel/babel/pull/14105
This PR fixes a bug in the way Babel traverses the AST. The fix was not expected to have any adverse impact (as can be seen by the fact that only the patch version was increased). However, versions of metro-react-native-babel-preset prior to 0.59 internally relied on this bug to exist.
Why did this suddenly break? Because metro-react-native-babel-preset declares all babel dependencies as ^7.0.0 (meaning: Take any minor and patch release in the 7.x major version series). Normally, a dependency lock file in an application project should avoid any unexpected dependency changes, but in some cases, dependency locks are not available (or used).
Two alternative fixes for the issue without updating metro-react-native-babel-preset:
Option 2 (when using version 0.58.0 of metro-react-native-babel-preset)
Change the following line in babel.config.js from
presets: ['module:metro-react-native-babel-preset']
to
presets: [['module:metro-react-native-babel-preset', {
unstable_disableES6Transforms: true
}]],
Option 3 (for earlier versions of metro-react-native-babel-preset)
Add the following to package.json:
"resolutions": {
"@babel/traverse": "7.16.7"
}
These options were described in detail by kerm1it and others in the following issue on GitHub:
https://github.com/babel/babel/issues/14139
Another amazingly detailed reply by Nicolò Ribaudo regarding a related bug in docz can be found here:
https://github.com/doczjs/docz/issues/1691#issuecomment-1025928444
Any of the solutions listed should work, but it's worth noting that you should probably run npx react-native start --reset-cache to clear the transform cache. 