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.

[emilmork]

I had the same problem with a 3rd party lib. My solution was to including the prefered modules + my js instead of excluding node_modules.

  module: {
    loaders: [
      {test: /\.js$/, include: [
        path.resolve(__dirname, 'js'),
        path.resolve(__dirname, 'node_modules/3rd-party-lib'),
    ], loaders: ['babel?stage=0&blacklist=validation.react']},
    ]
  }

[amccloud]

What was the 3rd party lib. I've noticed a lot of react native projects that actually require babel processing because they are es6.

On Tuesday, September 15, 2015, Emil Mork notifications@github.com wrote:

I had the same problem with a 3rd party lib. My solution was to including the prefered modules + my js instead of excluding node_modules.

module: { loaders: [ {test: /.js$/, include: [ path.resolve(dirname, 'js'), path.resolve(dirname, 'node_modules/3rd-party-lib'), ], loaders: ['babel?stage=0&blacklist=validation.react']}, ] }

— Reply to this email directly or view it on GitHub https://github.com/mjohnston/react-native-webpack-server/issues/34#issuecomment-140480796 .

[emilmork]

@amccloud: It was gb-native-router. Its a fork of react-native-router.

And Yes, the library uses es6 syntax.

[sslash]

I am also getting a ERROR in ./src/containers/Create/CaptureScreen/index.js Module not found: Error: Cannot resolve module 'react-native-camera' in /Users/micgunnu/code/sap/routes/Routes-native/src/containers/Create/CaptureScreen @ ./src/containers/Create/CaptureScreen/index.js 48:13-43 Even though I include it like this: include: [ path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules/react-native-camera') ], Not sure if this has something to do with react-native-camera, seeing you have to add an object-c file to the project library. Has anyone had this experience?

[emilmork]

@sslash react-native-camera needs an native implementation. So, if you havent allready you first need to add the needing resources in xcode. See the 'getting started' section on react-native-camera repo.

Also, i have turned back to use packager over webpack-server for react-native. The es5 shim is a bit limited, and lack support for android(you cannot change debugging port on android). It does not have hot-loader but you can reload you entire bundle on change using Reload.js, which is good enough for me.

[sslash]

Yes, I have added all the necessary resources that is described in getting started at the camera repo. I will try to see if using the packager helps!

[sslash]

@emilmork In an attempt to get this working I tried to run the example app with v0.6.0 and it gives me node_modules/react-native-webpack-server/lib/Server.js:3 const fs = require('fs'); ^^^^^ SyntaxError: Use of const in strict mode. at exports.runInThisContext (vm.js:73:16) at Module._compile (module.js:443:25) at Object.Module._extensions..js (module.js:478:10). Also happens in my own project

[emilmork]

@sslash I would try updating react-native and create a new react-native project from scratch. 'react-native init Test'. Then install react-native-camera and run with packager.

[sslash]

@emilmork So not use react-native-webpack-server and get awesome hot loading? :(

[emilmork]

@sslash You might use more time debugging webpack-server than hot loading will save you time developing :)

If you make react-native-camera work on a fresh prosjekt with packager it might be easier to make it work with webpack-server.

[gaearon]

SyntaxError: Use of const in strict mode.

Are you using at least io >= 2?

[sslash]

@gaearon silly of me was on 0.12. However using v2.1.0 I am back to the old Cannot resolve module 'react-native-camera' (const in strict mode is gone though)

[jkyau]

@sslash did you figure out how to get react-native-camera working with rnws?

[amccloud]

@sslash @jkyau

import Camera from 'react-native-camera/index.ios';

[sslash]

@jkyau nopes, didn't bother ;)