CODEWITHSUNDEEP
react-navigationreact-native-navigationreact-navigation-stackreact-navigation-bottom-tab
user938363
user938363

Reputation: 10350

Launch error caused by @react-navigation/bottom-tabs 5.x

After upgrading to latest @react-navigation/stack 5.2.10 from previous 5.x. The App (react native 0.61.5) launch has an error:

error: bundling failed: SyntaxError: C:\D\code\js\emps_fe615\node_modules\@react-navigation\bottom-tabs\src\index.tsx: Unexpected token (15:12)

  13 |  * Types
  14 |  */
> 15 | export type {
     |             ^
  16 |   BottomTabNavigationOptions,
  17 |   BottomTabNavigationProp,
  18 |   BottomTabBarProps,
 BUNDLE  [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓░░░░ 75.5% (802/923)::ffff:127.0.0.1 - - [11/Apr/2020:02:14:43 +0000] "GET /index.bundle?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
 BUNDLE  [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓░░░░ 75.5% (802/923), failed.

Here is the part of package.json:

"@react-navigation/bottom-tabs": "^5.2.6",
"@react-navigation/native": "^5.1.5",
"@react-navigation/stack": "^5.2.10"
"react-native-gesture-handler": "^1.6.1",
"react-native-screens": "^2.4.0",

Is there anyone seeing the error after upgrade? Any idea to fix it?

Upvotes: 2

Views: 2356

Answers (4)

jsbls
jsbls

Reputation: 155

This tends to happen if expo-cli is globally installed. If it is, try this:

yarn global add @babel/core

Or its npm equivalent

npm install -g @babel/core

However, it's been brought to my attention that it's better to not have any global packages, so you'd have to yarn global remove expo-cli and add it to your project instead (yarn add expo-cli).

Upvotes: 0

Haritha Senevirathne
Haritha Senevirathne

Reputation: 155

your @react-navigation/native version is 5.1.5 Your navigators (stack and bottom-tabs) versions are not the same as @react-navigation/native version. That's why this issue occurs. Make sure those packages are having same version.

Upvotes: 0

Sridhar
Sridhar

Reputation: 421

This below steps will solve the issue. 

npm install @babel/core@^7.9.0
npm install @babel/runtime@^7.9.2
npm cache clean --force
expo start -c

Upvotes: 1

Maycon Mesquita
Maycon Mesquita

Reputation: 4590

If nothing is working, and if you're using yarn, you can try it:

  1. rm -rf node_modules yarn.lock
  2. yarn cache clean
  3. yarn

If NPM:

  1. rm -rf node_modules package-lock.lock
  2. npm cache clean --force
  3. npm install

[Bonus] Start React Native cleaning the cache:

Vanilla RN: npx react-native start --reset-cache

Expo: expo start -c

Upvotes: 3

Related Questions