React-native-paper: Syntax error during bundling with JavaScript project

[tehtea]

Hi all, I'm facing a syntax error with the bundling of the app of the app in my JavaScript project. For some reason Babel isn't able to transpile tsx in the library to JS and I'm not sure how to debug this so I'm creating a new issue since there didn't seem to be any existing ones previously.

Dependencies:

• "react-native-paper": "^4.2.0",
• "react-native": "0.61.5",
• "@babel/core": "^7.5.5",
• "@babel/preset-flow": "^7.0.0",
• "@babel/runtime": "^7.5.5",
• "babel-eslint": "^10.0.3",
• "babel-jest": "^24.8.0",
• "babel-plugin-transform-inline-environment-variables": "^0.4.3",
• "react-native-vector-icons": "^6.4.2"

My babel.config.js:

const path = require('path')
const pak = require('./package.json');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

Error output (comes after running npm run start-android):

 BUNDLE  [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓░░░░░░ 68.4% (2010/2430)::ffff:192.168.1.121 - - [29/Sep/2020:04:11:07 +0000] "GET /index.bundle?pl

error: bundling failed: SyntaxError: /home/tehtea/thisapp/node_modules/react-native-paper/src/components/Chip.tsx: Unexpected token (14:12)

  12 | } from 'react-native';
  13 | import color from 'color';
> 14 | import type { IconSource } from './Icon';
     |             ^
  15 | import Icon from './Icon';
  16 | import MaterialCommunityIcon from './MaterialCommunityIcon';
  17 | import Surface from './Surface';

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.61.5, latest: 0.63.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.61.5, latest: 0.63.2)
• react-native-vector-icons (found: 6.4.2, latest: 7.1.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[tehtea]

Updated the issue to include the version used for react-native-vector-icons.

Can't update to the latest versions for now because of the refactoring required, and wasn't able to replicate the issue on a fresh project with the above version numbers.

[tehtea]

What a dumb error. It was caused by an outdated version of babel. Fixed it by upgrading both @babel/core and @babel/runtime from 7.5.5 to 7.8.4. See a similar error in another project here: https://github.com/react-navigation/react-navigation/issues/7981

[sangdth]

@tehtea I upgraded it and the problem gone. Thanks @tehtea