[0.32,0.33] Browser field in package.json not working

[Bhullnatik]

Issue Description

When using a module which implement browser: {} in their package.json, the corresponding module(s) specified in the package.json will return null (Ref 1 and Ref 2) instead of an empty object as per the spec. This then throws an Unknown module error because the packager assumes that it didn't find a module when getting null (Ref).

I tracked the issue down to the new version of node-haste being used in React Native since the 0.32 version (cc @davidaurelio), but I'm not sure of how to fix it myself.

Steps to Reproduce / Code Snippets

Import a package using the browser field in package.json to ignore modules. https://github.com/yahoo/intl-messageformat for example (Ref package.json and incriminating line)

Expected Results

it should import an empty object instead of throwing an error.

Additional Information

• React Native version: [0.32, 0.33]
• Platform(s) (iOS, Android, or both?): packager
• Operating System (macOS, Linux, or Windows?): *

[brentvatne]

cc @davidaurelio

[philikon]

I'm seeing this problem too with https://github.com/philikon/ReactNativify

[philikon]

To summarize this problem:

1. Package.redirectRequire() will return false if the browser field for the dependency is false in that package's package.json: https://github.com/facebook/react-native/blob/0.32-stable/packager/react-packager/src/node-haste/Package.js#L84-L87
2. Based on that false return value, we return null for the respective module when resolving the dependency: https://github.com/facebook/react-native/blob/0.32-stable/packager/react-packager/src/node-haste/DependencyGraph/ResolutionRequest.js#L342-L345
3. Later, we filter the dependencies and don't include any that are null (and we have no mocks in the default configuration) for the value that we pass to ResolutionResponse.setResolvedDependencyPairs(): https://github.com/facebook/react-native/blob/0.32-stable/packager/react-packager/src/node-haste/DependencyGraph/ResolutionRequest.js#L161-L178
4. So by the time we rewrite the require() call in the bundle, we no longer have an record of that dependency, so we simply do not end up rewriting the call: https://github.com/facebook/react-native/blob/0.32-stable/packager/react-packager/src/Resolver/index.js#L197-L204

Without knowing too much of the internals of the packager, I think an elegant way to fix this would be to provide an empty module and return that instead of doing nothing in (3). Then the machinery in (4) simply does its normal thing, rewriting the require() call to require(27) where 27 would be the module ID of the empty module.

Thoughts, @davidaurelio?

[davidaurelio]

Yeah, I guess the time to fix this has finally come :-P

as @philikon suggested, doing the following should work:

1. Add an empty file somewhere, maybe next to ResolutionRequest. Or maybe in DependencyGraph/assets
2. Instead of returning null, return the absolute path to that file.

If anybody wants to send a PR, just ping me on Messenger and I will shipit. I don’t always read github notifications. Otherwise I will do it tomorrow, London time.

[philikon]

Thanks much for the fix, @davidaurelio!