React-native: Don't use es6 import/export in example generated code

Created on 6 Sep 2016  路  8Comments  路  Source: facebook/react-native

The project generated with react-native init AwesomeProject uses es6 which is cool, but my problem in particular is with import/exports feature which is not currently supported well by node (using LTS version)

Users will want to use this archetype to start writing their projects and want to structure js using folders and files. For that require() is the only option since import/export won't work. It's weird to have both mechanisms for dependencies in the code. IMO using import in this case might cause unnecessary confusion

So I humble but strongly recommend you to change the import with require() in the example generated source.

Thanks! The documentation and user friendly of this project is awesome! Keep it up ! :)

Ran Commands Locked

Most helpful comment

-1, Node is not React Native and by this argument we shouldn't use any modern features in JavaScript that a year-old version of Node doesn't natively support. I don't think we should hold back React Native because of Node basic feature set -- you can use Babel anyway. I agree with writing JS consistently across your stack, though, so one thing my team does is use Babel in all environments - React Native, browsers, and Node.

All 8 comments

-1, Node is not React Native and by this argument we shouldn't use any modern features in JavaScript that a year-old version of Node doesn't natively support. I don't think we should hold back React Native because of Node basic feature set -- you can use Babel anyway. I agree with writing JS consistently across your stack, though, so one thing my team does is use Babel in all environments - React Native, browsers, and Node.

ide:

Good point. Then, an alternative proposal, inspired on your comments, is then to use babel in this example project. I personally wouldn't force users into this...

In this issue, I'm trying to prioritise the users experience instead of technologies. You can't assume that users are experts on node, babel, etc. I still think that at the current situation, when the user needs to structure their sources this situation will make them waste time as it happened to me.

import/export works on the example just because the application is written in a single file... It would be ideal if the example source code could be structured in a more realistic fashion with folders/files. But if that's not the case, at least don't cause confusion with import/export.

I'm not sure why you think that import/export "won't work." I've used import/export in a React Native project that has dozens of source files without running into any major problems. In fact I no longer use require() anywhere and have configured an eslint plugin to flag any require() statement in the project's sources with a warning.

greghe : How do you make it work ? Are you using node or something like node-babel ? I tried using import/export with node lts and node current trying to reference modules in other files / folders in different ways and it didn't worked. Also I read some documentation and in all of them they say that nodejs don't support this feature at all. If you have an example please share it. Thanks!

@cancerberoSgx Node doesn't support JSX or Flow either (and never will). I think it's not fair to degrade the DX of RN just because Node doesn't support them.

If you value consistency across your project, you should use babel with Node too, or you are free to just use require regardless of what the default template has.

import/export works on the example just because the application is written in a single file...

What do you mean by this? Why would it not work if there are multiple files?

I didn't make any special modifications. React Native is already set up to perform the necessary transpilations. The one thing I do do though is add a @providesModule <moduleName> in the comments at the top of each file, so that import (or require for that matter) can find them.

@facebook-github-bot close

@Kureev tells me to close this issue. If you think it should still be opened let us know why.

Was this page helpful?
0 / 5 - 0 ratings