node_modules/react-native-navbar/index.js: Unexpected token (98:19)

[deju]

I downloaded a demo.(http://startreact.com/themes/native-starter/)

After that. Run the App, I got an error:

SyntaxError: /xxxxx/node_modules/react-native-navbar/index.js: Unexpected token (98:19)

How to fix this? The Version of Packgers are:

flux: 2.1.1  
react-native: 0.13.2 
react-native-drawer: 1.6.0 
react-native-navbar: 1.0.3 
react-native-responsive-image: 1.0.0

[Kureev]

Well, seems to be related to your Babel version/config. In the navbar I use static class properties, so you need to have an appropriate setting in your .babelrc (transform-class-properties). Check http://stackoverflow.com/a/33486153/2656078 for further reading.

[deju]

@Kureev I have saw it. It seems difficult. :(

[Kureev]

It's just about changing .babelrc config. Instead of using stage, use

presets: [{
    plugins: [
        'transform-class-properties'
    ]
}, 'stage-0', 'es2015', 'react']

and install corresponding plugins/presets. That's it.

[grabbou]

I think class properties are turned on by default in latest React - I am using them without rc stuff

[grabbou]

Please upgrade your React to latest version as 0.13 is really old and the errors will be gone.

Also - @Kureev you are pasting Babel 6 config, React 0.13 was using 5.x - so in your case it won't work.

Either upgrade or use 5.x config :)

[deju]

@grabbou Thank you, I tried to upgrade RN and occured some other errors. I were connect the author, the author says he will be fix it.

[Taakn]

Hello @Kureev @grabbou I have the same error but cannot manage to fix it. Would you mind helping me out?

My file node_modules/react-native-navbar/.babelrc is:

{
  "retainLines": true,
  "stage": 0,
  "compact": true,
  "comments": false,
  "whitelist": [
    "es6.arrowFunctions",
    "es6.blockScoping",
    "es6.classes",
    "es6.destructuring",
    "es6.parameters",
    "es6.properties.computed",
    "es6.properties.shorthand",
    "es6.spread",
    "es6.modules",
    "es6.templateLiterals",
    "es7.trailingFunctionCommas",
    "es7.objectRestSpread",
    "es7.asyncFunctions",
    "es7.classProperties",
    "es7.decorators",
    "es7.exportExtensions",
    "regenerator",
    "flow",
    "react",
    "react.displayName"
  ],
  "sourceMaps": false
}

I am getting the following error if I try to update my file

{
  "retainLines": true,
  presets: [{
    plugins: [
        'transform-class-properties'
    ]
   }, 'stage-0', 'es2015', 'react'],
  "compact": true,
  "comments": false,
  "sourceMaps": false
}

Couldn't find preset "stage-0" relative to directory node_modules/react-native-navbar

Also @Kureev what do you mean by "and install corresponding plugins/presets."?

Thanks so much for your help, I really appreciate it!

[Taakn]

It's working better with the following plugins, but I am now getting a lot of errors such as "a semi colon is required after a class property"

npm install babel-preset-stage-0 npm install babel-preset-es2015 npm install babel-preset-react npm install babel-plugin-transform-class-properties

[Kureev]

I'm trying to do my best to have a time for fixing it. To be honest, I'd appreciate a PR a lot! Fixing semi colons doesn't sound like a big issue :smiley:

@grabbou Maybe you have a few mins to help me with it?

[grabbou]

@Taakn, what is react-native version you are using?

My guess is that you are not using the most recent version because latest React Native supports class properties by default, see -> https://github.com/facebook/react-native/blob/master/packager/react-packager/.babelrc#L9

The simplest thing for you would've been to upgrade to React 0.17+ (ideally 0.18) and just re-run. Remember to delete all .babelrc files you've made during testing, esp. the one from react-native-navbar folder.

If you for some reason cannot upgrade to latest React, put the babelrc file you already created inside react-native-navbar into root of your project (but again, check if your React Native version uses babel 5 or 6 - you can do so by checking out its package.json). If you are not sure how to add custom transformers, search for issues in RN repo, there's been plenty of them back in the day (few months ago there were only few transformers enabled by default)

Semicolons are after class properties in master, not sure if that reflects npm.