RN 0.56 & 0.57 - providesModule no longer works

[thomas-gilbert]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS Sierra 10.12.6
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 365.54 MB / 16.00 GB
Shell: 5.2 - /bin/zsh
Binaries:
Node: 9.4.0 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.1, macOS 10.13, tvOS 11.1, watchOS 4.1
Android SDK:
Build Tools: 26.0.2, 27.0.1, 27.0.3
API Levels: 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.1/9B55 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-git-upgrade: 0.2.7

Description

ProvidesModule does not seem to work after RN version 0.55.4. Tested on both 0.56.1 and 0.57.0 with the same result.

When creating a brand new React Native project using react-native init and utilising providesModule, the metro bundler complains with the following error -

error: bundling failed: Error: Unable to resolve module `App` from `../TestApp/index.js`: Module `App` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (../TestApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
    at ResolutionRequest.resolveDependency (../TestApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
    at DependencyGraph.resolveDependency (../TestApp/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
    at Object.resolve (../TestApp/node_modules/metro/src/lib/transformHelpers.js:180:25)
    at dependencies.map.result (../TestApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
    at Array.map (<anonymous>)
    at resolveDependencies (../TestApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
    at ../TestApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
    at Generator.next (<anonymous>)
    at step (../TestApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)

This is the case when using providesModules in any file and importing it. This is a regression on the following versions of RN 0.56.0, 0.56.1 and 0.57.0; but works as expected in 0.55.4.

Reproducible Demo

Please see the sample project I have created here - https://github.com/thomas-gilbert/react-native-57-issue. The only change I have made from the standard output of react-native init, can be seen in this commit https://github.com/thomas-gilbert/react-native-57-issue/commit/15bd63bfd09b9f48993ce5a37273f3be9647235b.

Steps to reproduce -

1. Run react-native init TestApp.
2. Modify App.js by adding the providesModule annotation at the top of the file e.g @providesModule App.
3. Modify index.js with import App from 'App'.
4. react-native run-android.
5. Error should be seen.

[kelset]

They don't work because provideModule overall has been removed as a functionality (example commit from master).

I can ask around for why but I haven't used them so never really noticed.

[thomas-gilbert]

@kelset Couldn't see it's removal documented in the release notes; so missed it.

I have been trawling the commits to find out why it was removed, found an issue and comment here #18995 (comment) that Haste should still work by using the filename without relative or absolute paths, but it doesn't. What am I missing? Is there some configuration required?

@mjesun can you provide any information?

[elicwhite]

hasteImpl is the configuration file where you can specify how file names map to the haste name. Here is an example: https://github.com/facebook/react-native/blob/master/jest/hasteImpl.js#L58-L78

[rvaitkus23]

Thanks @TheSavior. Your example is for Jest. How we should use for building app. Currently packager does not find module by file name. Can you point where configuration should be changed after RN upgrade and using@ providesModule?

[kelset]

I think that the baseline "path to upgrade" should be to not use @provideModule anymore - I've asked in the core and basically it was a "sugarcode" to annotate files for haste to be quicker, and it was never meant to be used outside of React Native. But since they modified how haste works, it's not needed anymore.

[rvaitkus23]

Thanks @kelset. Good to know reason. And it makes sense. As in fbjs it is clearly noted.
Anyway. Application I am working on was designed long before I came. Getting module by file name does not work for me and it looks like I am not the only one. Do we need to add some kind of configuration? I am upgrading from 0.50 to 0.57

[kelset]

I suggest you upgrade step-by-step (not 7 versions in 1 PR), and I think that you can make it work without provideModules while doing those steps.

Do we need to add some kind of configuration?

I guess you mean for "re-enabling" @provideModule, in which case, AFAIK there is no way to "re-enable" it. But I may be wrong.

[rvaitkus23]

I am removing @provideModule, but imports are failing if it is imported by file name (without path). As I have over 250 @provideModuledeclarations and every single file has import what would be needed to add path I am looking for less painful solution. Now added babel-plugin-module-resolver plugin and mapping modules in .babelrc file.
It does work, but for me it does not feel like a proper way to handle it. If RN is designed to have out of the box solution I would love to use it. But so far can't find any proper description.
Have a feeling that you might be the one who could point me and others :)

[elicwhite]

This might be a question for Metro. Maybe post on their repo? I’m not sure where the configuration for haste lives.

[mjesun]

@rvaitkus23 The example @TheSavior gave you is valid for Metro too, since the Haste implementation we use is jest-haste-map. In the case of Metro, you can pass your custom implementation via hasteImplModulePath, which you can find on the Metro docs.

[rvaitkus23]

Thanks a lot. Your comments made thing much clearer. I will try this approach later this week.

[TheRohitSharma]

@rvaitkus23 Did you ever figure out the exact steps to solve this without changing the import path in every file?