Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Syntax error during bundling with JavaScript project

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Comments:5

Top GitHub Comments

3reactions

tehteacommented, Sep 29, 2020

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

0reactions

sangdthcommented, Nov 17, 2020

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

Top Results From Across the Web

Unexpected token < bundle js:1 - Stack Overflow

Its a project for practice how bundle files. The console show me: bundle.js:1 Uncaught SyntaxError: Unexpected token '<'. Its refers to the html ......

SyntaxError - JavaScript - MDN Web Docs

The SyntaxError object represents an error when trying to interpret syntactically invalid code. It is thrown when the JavaScript engine encounters tokens or ......

Syntax Error during deploy --build command step bundling ...

Hi, i am experiencing an issue using netlify-cli to build and deploy a site with some netlify functions. Locally using netlify dev command ......

rollup.js

Once you're finished with the bundle object, you should call bundle.close() , which will let plugins clean up their external processes or services...

Modules in JavaScript – CommonJS and ESmodules Explained

Instead of having all of our program's components in a single file, ... SyntaxError: Cannot use import statement outside a module.