Error on import statement in JavaScript/React Native code

Question

I'm trying to incorporate a React component for radio buttons in my iOS app that's written in React Native, however I get an error when trying to import the component using the method that the author specified.

I first installed the component in the root directory of the app's XCode project/source code using the following statement:

npm i -S react-native-radio-buttons

Everything looked like it went through fine, so I incorporated the code for the component into the JS file for the screen that would use it, but I get an error on the very first line (which contains the import statement).

The import statement goes like this:

import { RadioButtons } from 'react-native-radio-buttons'

And the error is:

Uncaught SyntaxError: Unexpected reserved word

As far as I can tell, that should be an acceptable way of doing things in ES6. If anyone could tell me why this would happen, I'd be grateful. Thanks in advance.

Arnaud Rinquin · Accepted Answer · 2015-08-11 09:37:25Z

5

react-native-radio-buttons author here,

I assumed everybody was using Babel with ES6 features enabled. I should add that to the README.

Edit: instruction and example .babelrc added to 0.4.2

Please try add this .babelrc file to your project root, as the provided example does:

{
  "whitelist": [
    "es6.modules"
  ]
}

edited Aug 11, 2015 at 9:37

answered Aug 11, 2015 at 9:19

Arnaud Rinquin

4,2961 gold badge32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pedram Over a year ago

Added the .babelrc, and after I put "use babel" at the top of the files that have the import statements, it started to work. Thanks.

xanadont · Accepted Answer · 2015-08-10 20:22:41Z

0

Are you using a tool to translate from ES6? "import" is not going to work. Have you tried:

var RadioButtons = require('react-native-radio-buttons');

instead?

answered Aug 10, 2015 at 20:22

xanadont

7,6326 gold badges39 silver badges51 bronze badges

10 Comments

Pedram Over a year ago

No, not using a tool. According to the following page, the import statement should work in ES6 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… I tried changing it to the code you suggested, but it then gives errors elsewhere in the imported component's code that use similar import syntax - so unfortunately that doesn't seem like it'll be a solution.

xanadont Over a year ago

What I'm saying is 'import' is ES6 and must be translated into another syntax for React Native to be happy. Are the subsequent errors possibly getting you closer to a fix?

xanadont Over a year ago

Furthermore, I just confirmed this syntax in my own test project produces the same error as you have reported.

Pedram Over a year ago

Oh I see. I changed all the import statements to the syntax you suggested, and now it's complaining about the export statements, which look like the following: export default RadioButtons; export { SegmentedControls }; export { RadioButtons } I was going to change them to something like module.exports = Item; but I'm not sure what to do with the "default" export line.

xanadont Over a year ago

Try shoving the source through Babel directly first. That might help.

|

Collectives™ on Stack Overflow

Error on import statement in JavaScript/React Native code

2 Answers 2

1 Comment

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related