ViewPager.js: Unable to resolve module StaticRenderer

[sulliwane]

Hello, thank you for this useful component. I have a problem since upgrading to RN-v0.14.0-rc (I'm not sure it's related) :
Error while loading: Unable to resolve module StaticRenderer from /Users/yosemit/Documents/Chat_Test/node_modules/react-native-viewpager/ViewPager.js: Invalid directory /Users/node_modules/StaticRenderer

Any idea what is the cause of this error? Thanks

[race604]

I just tested this on RN-v0.14.0-rc, it works fine on Android, but break on iOS. I'll check this.

[sulliwane]

Actually I also have the same error show up when packaging for Android, see below:

[1:14:23 PM] <START> find dependencies
Unable to resolve module StaticRenderer from /home/sul/Documents/Chat_App/node_modules/react-native-viewpager/ViewPager.js
Unable to resolve module invariant from /home/sul/Documents/Chat_App/node_modules/react-native-viewpager/ViewPagerDataSource.js
Unable to resolve module isEmpty from /home/sul/Documents/Chat_App/node_modules/react-native-viewpager/ViewPagerDataSource.js
Unable to resolve module warning from /home/sul/Documents/Chat_App/node_modules/react-native-viewpager/ViewPagerDataSource.js
[1:14:23 PM] <END>   find dependencies (147ms)
[1:14:23 PM] <START> transform
transforming [========================================] 100% 403/404[1:14:23 PM]

I use npm@3.3.10

Thanks a lot for your help.

[race604]

I think 0.14.0-rc is not well tested, there is the same problem facebook/react-native#3817

I'll check this is issue when 0.14.0 released.

[sulliwane]

Indeed, the StaticRenderer problem can be solved by using destructuring assignment (instead of direct import, which is not recommended):

var React = require('react-native');
var {
  Dimensions,
  Text,
  View,
  TouchableOpacity,
  PanResponder,
  Animated,
  PropTypes,
  StyleSheet,
  StaticRenderer,
} = React

But then there is problem with this 3 import:

var invariant = require('invariant');
var isEmpty = require('isEmpty');
var warning = require('warning');

It looks like invariant and warning are both npm packages, so i installed them. And I replace isEmpty by if (arr.length == 0) {, but still I get this error:

Thanks :)

[race604]

This is the same problem: can't find the StaticRenderer element. We can remove the reference of StaticRenderer:

  _getPage(pageIdx: number) {
    var dataSource = this.props.dataSource;
    var pageID = dataSource.pageIdentities[pageIdx];
    return this.props.renderPage(
      dataSource.getPageData(pageIdx),
      pageID
    );
    // return (
    //   <StaticRenderer
    //     key={'p_' + pageID}
    //     shouldUpdate={true}
    //     render={this.props.renderPage.bind(
    //       null,
    //       dataSource.getPageData(pageIdx),
    //       pageID
    //     )}
    //   />
    // );
  },

[py110]

0.14 same problem

[gunters63]

Removing the reference of StaticRenderer only helps partially.
ViewPagerDataSource requires invariant, isEmpty and warning modules which were pulled in automatically before (0.13), not anymore now.

[sulliwane]

Packager for Android, same problem (0.14.0 here):

Unable to resolve module invariant from node_modules/react-native-viewpager/ViewPagerDataSource.js
Unable to resolve module isEmpty from node_modules/react-native-viewpager/ViewPagerDataSource.js
Unable to resolve module warning from node_modules/react-native-viewpager/ViewPagerDataSource.js

I'll keep you updated if I find a dirty fix :)

[sulliwane]

npm install invariant
npm install warning

in ViewPagerDataSource.js Replace isEmpty(array) by arr.length === 0

and finally in ViewPager.js Move StaticRenderer into:

var {
  StaticRenderer,
} = React;

Then all the warnings disappear, but ...here is the remaining error:

Invariant violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'ViewPager'.

[alvinwoon]

on latest iOS device and simulator as well. RN 0.14.1

[drosko]

I get the same error about the Invariant violation, expected a string, on iOS, even after fixing the things above.

[paulgessinger]

The invariant error is caused by StaticRenderer being undefined when extracting it from react.

Try requiring it from "react-native/Libraries/Components/StaticRenderer", that worked for me. (Having other problems now though.

[sulliwane]

Thanks paulgessinger, it worked for me :)

[leeight]

+1

[alvinwoon]

Thanks for the fix and merge. Will it be pushed out via new npm version?

[race604]

Thank you for this PR, I'll release a new version.