Galooshi / happo

Visual diffing in CI for user interfaces
504 stars 16 forks source link

[target-react-native] WIP adding support for building JS bundle #199

Closed spikebrehm closed 3 years ago

spikebrehm commented 7 years ago

This is a WIP attempt to add support for using static JS bundles instead of the RN packager to happo-target-react-native. It adds a usePackager option that defaults to true. When false, it will call the buildBundle function to build a static JS bundle using the RN CLI.

This was excruciatingly slow to test, because I hit a number of roadblocks along the way:

[Bundler]: Error:
Unable to resolve module `react` from `/Users/spike/code/happo/packages/happo-example-react-native-project/happo.js`: Module does not exist in the module map or in these directories:
  /Users/spike/code/happo/packages/happo-example-react-native-project/node_modules
,   /Users/spike/code/happo/node_modules

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 packager cache: `rm -fr $TMPDIR/react-*` or `npm start --reset-cache`.

Maybe this is a result of the Lerna setup and the nested projects? I'm not sure why it can't find react because it definitely exists here:

 /Users/spike/code/happo/packages/happo-example-react-native-project/node_modules/react

As a workaround to move forward, I commented out the import and any JSX in the file and the bundle step works.

error

which is the result of babelHelpers["typeof"] not being present. I upgraded to RN 0.42 in an attempt to fix it, however it persisted. I hacked around it by manually editing the JS bundle file. I think the issue may be that Babel is being run on the babelHelpers.js shipped by RN. Here's why I think that; this is the typeof helper that lives in RN's babelHelpers.js:

babelHelpers.typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
  return typeof obj;
} : function (obj) {
  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};

and here is the corresponding output in my main.jsbundle file:

babelHelpers.typeof = typeof Symbol === "function" && typeof (typeof Symbol === "function" ? Symbol.iterator : "@@iterator") === "symbol" ? function (obj) {
  return typeof obj;
} : function (obj) {
  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== (typeof Symbol === "function" ? Symbol.prototype : "@@prototype") ? "symbol" : typeof obj;
};

Manually editing main.jsbundle and replacing the typeof helper with what ships with RN fixes it.

Maybe there are conflicting Babel setups? Could it be a side effect of the Lerna setup?

cc: @lelandrichardson