Syntax error during bundling with JavaScript project

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';

1 possible answer(s) on “Syntax error during bundling with JavaScript project