Loading 3rd party libs causes errors

[grabbou]

ERROR in ./~/react-native-keyboardevents/KeyboardEvents.ios.js
Module parse failed: /node_modules/react-native-keyboardevents/KeyboardEvents.ios.js Line 15: Unexpected token =>
You may need an appropriate loader to handle this file type.
|   'WillChangeFrame',
|   'DidChangeFrame',
| ].map((event) => 'Keyboard' + event);
| 
| events.forEach((eventKey) => {
 @ ./src/client/components/trackKeyboard.react.js 9:33-71

And so on... the only solution is to pass this package via babel.

[gaearon]

Arguably the project maintainer should provide compiled versions.
I don't really see how this is an issue with react-native-webpack-server.

If the project maintainer wants to provide only ES6 version, indeed, the only thing you can do is to add its configuration explicitly to your Webpack config. Which is not nice at all because you don't know the Babel settings expected by the author.

cc @johanneslumpe

[grabbou]

Thanks for the answer! I do agree with you, unfortunately looks like the problem lives somewhere else. The packager fails at syntax that it normally handles without webpack - destructing (which is widely used in almost all the projects and examples and none of them mentions a single word about ES6 pre-compiling).

[gaearon]

Isn't the packager only used for RN's own modules?
I thought that everything else is handled by Webpack (including the deps).

[grabbou]

How I understand that is that packager compiles the whole bundle to one index.ios.bundle and that's pretty much everything. Haven't investigated that a lot yet but it would've been weird if all open source packages were published with syntax that's not supported by default yet providing no additional notes.

Examples:

• https://github.com/corymsmith/react-native-icons/blob/master/SMXTabBarIOS.ios.js#L27
• https://github.com/t4t5/react-native-router/blob/master/index.js#L7-L12

In the latest release, they decided to replace jstransform with babel but the list of available transformations stays the same as of today:
http://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers

[johanneslumpe]

@grabbou @gaearon Yeah it was expected that people use the packager, which transforms your code for you - even your modules. If think the problem here is that the dev server is ignoring the modules directory? But sure, I can provide an ES5 version I guess :)

[grabbou]

Yeah, it ignores node_modules and the only solution is to pass selected whitelisted folders via babel which works like a charm.

[johanneslumpe]

@grabbou so do you still want an ES5 version?

[grabbou]

Nope, all works flawlessly with the above config, just wanted to create an issue as excluding node_modules as per example can cause some issues.

[johanneslumpe]

Ah ok, cool. If you run into any issues with the keyboard event lib, feel free to post at the other repo though :)

[mjohnston]

Sorry to jump in late on this one. This has come up a couple times before. node_modules is only excluded for performance reasons in the example project - this is a fairly common setup from what I've seen.

I'll update the docs to call this out. Thanks for raising the issue.

[lukekarrys]

I was having a different (but I think related) error when loading a 3rd party module that required linking and I thought I would drop my solution here since this was the issue my searches brought up.

I was trying to require react-native-icons and after I ran the installation instructions, the docs say var Icon = require('FAKIconImage') will work. But webpack was giving me the error:

ERROR in ./src/components/Settings.js
Module not found: Error: Cannot resolve module 'FAKIconImage' in /Users/lukekarrys/projects/lukekarrys/react-native-app/src/components
 @ ./src/components/Settings.js 27:19-41

What I needed to do was make babel-loader include the react-native-icons module and to require it with var Icon = require('react-native-icons') instead. This might be obvious to some, but took me a bit to figure out. I'm also not sure why this is the case, if anyone has an explanation I would love to learn why.

@mjohnston Do you think this is worth calling out in the docs as well? Happy to submit a PR if you think it is.

[mjohnston]

Personally, I think it's bad practice for 3rd party modules to rely on the proprietary @providesModule syntax - especially when you consider standard CommonJS/ES6 modules work with the default react-native packager.

That being said, if this has become common practice in the react-native ecosystem I'd be happy to accept a PR for a docs update.

[lukekarrys]

Ah, I had never heard of @providesModule before so I didn't know thats why this was happening. Also this was the first module I had ever required in react-native with a linking step so it threw me for a loop.

I've only seen it in two modules, so I think these comments are enough for now. If I keep seeing this I'll reconsider the PR.