react-primitives is not transpiling when bundling for react-native production

Question

react-primitives is not transpiling when bundling for react-native production

peterp opened this issue 7 years ago · comments

In my react-native project

node ./node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --dev false --reset-cache --bundle-output /tmp/main.jsbundle --assets-dest /tmp/

**TypeError: /Users/peterp/Personal/xxx/node_modules/react-primitives/lib/modules/Platform.js: Property left of AssignmentExpression expected node to be of a type ["LVal"] but instead got "StringLiteral"**
transform[stderr]:     at Object.validate (/Users/peterp/Personal/xxx/node_modules/babel-types/lib/definitions/index.js:109:13)
transform[stderr]:     at Object.validate (/Users/peterp/Personal/xxx/node_modules/babel-types/lib/index.js:505:9)
transform[stderr]:     at NodePath._replaceWith (/Users/peterp/Personal/xxx/node_modules/babel-traverse/lib/path/replacement.js:176:7)
transform[stderr]:     at NodePath.replaceWith (/Users/peterp/Personal/xxx/node_modules/babel-traverse/lib/path/replacement.js:160:8)
transform[stderr]:     at PluginPass.MemberExpression (/Users/peterp/Personal/xxx/node_modules/metro-bundler/build/JSTransformer/worker/inline.js:126:14)

I've narrowed it down the assignment here: https://github.com/lelandrichardson/react-primitives/blob/master/src/modules/Platform.js#L13

Peter Pistorius · Answer 1 · Sat Jul 15 2017 22:12:17 GMT+0800 (China Standard Time)

I changed line 13-14 to

    Platform['OS'] = platform.OS;
    Platform['Version'] = platform.Version;

and it built successfully, this comment helped me figure it out. This seems like something that should be fixed in React Native's bundler, but I'm not sure?

Kevin Brown · Answer 2 · Mon Jul 17 2017 17:34:53 GMT+0800 (China Standard Time)

We're having this issue too, but unfortunately the fix above doesn't seem to work for us.

We had to remove react-primitives from our project and instead use React Native versions from our project to get release builds to work on React Native. :-(

I'll watch this issue and we'll switch back as soon as we can!

Peter Pistorius · Answer 3 · Mon Jul 17 2017 17:38:11 GMT+0800 (China Standard Time)

@blargity I've created a very hacky release that you could test: npm install peterp/react-primitives.

It fixes the touchable and this bundling issue. I'm using this on react-native 0.46.3. If it does work, then please do not use this long term... It's a stopgap whilst I was trying to figure this out.

I'm fundamentally interested in sharing a design system between react-dom and react-native. It feels like we're so close!

Kevin Brown · Answer 4 · Mon Jul 17 2017 17:42:32 GMT+0800 (China Standard Time)

That's ok, I'll keep an eye on this issue for an official fix. We'll be able to switch back really easily. Thanks though!

Nicolas Gallagher · Answer 5 · Mon Jul 17 2017 22:51:32 GMT+0800 (China Standard Time)

You can also alias react-native to react-native-web if you're having problems

Peter Pistorius · Answer 6 · Tue Jul 18 2017 00:26:29 GMT+0800 (China Standard Time)

@necolas that sounds interesting, how would one go about doing that?

Nicolas Gallagher · Answer 7 · Tue Jul 18 2017 00:57:27 GMT+0800 (China Standard Time)

https://github.com/necolas/react-native-web/blob/master/docs/guides/getting-started.md

samjt · Answer 8 · Wed Aug 16 2017 15:40:12 GMT+0800 (China Standard Time)

@peterp What fixes did you end up implementing? I can't find your repo and the 'string accessor' fix doesn't seem to work

Jani Eväkallio · Answer 9 · Wed Aug 23 2017 21:32:12 GMT+0800 (China Standard Time)

Note, the string accessor fix works for me when applied to lib/modules/Platform.js (note lib, not src as linked by @peterp's original post. The index.js imports directly from lib.)

The issue is caused by Metro bundler inlining Platform.OS declaration during the JS transform phase, as described in these tests, so that Platform.OS = platform.OS; becomes "ios" = platform.OS, which is obviously an invalid expression.

If you want the change to be patched in permanently until this gets fixed, I can recommend patch-package.

Install patch-package with npm install --dev patch-package.
Add prepare npm script:

scripts: {
  //snip...
  "prepare": "patch-package"
}

Replace the dot notation property access with brackets in lib/modules/Platform.js (and in src as well, if you want to be cool about it):

-    Platform.OS = platform.OS;
-    Platform.OS = platform.Version;
+    Platform['OS'] = platform.OS;
+    Platform['Version'] = platform.Version;

Run patch-package to generate patch:

npm run prepare -- react-primitives

Commit the created patches/ folder to source control.

The patch should now be applied every time you npm install or yarn

Jani Eväkallio · Answer 10 · Wed Aug 23 2017 21:38:54 GMT+0800 (China Standard Time)

@peterp @lelandrichardson I know this is an issue that should really be fixed in metro-bundler, but for the time being (and for backwards compatibility for existing versions of Metro going forward) I think the fix should be upstreamed to react-primitives.

Is there a reason you didn't create a PR for this? I can go ahead and do that, just wanted to check if this is something you've already thought through and considered a bad idea?

Peter Pistorius · Answer 11 · Wed Aug 23 2017 22:45:20 GMT+0800 (China Standard Time)

@jevakallio I've already reported the issue to the metro-bundler team: facebook/metro#27

I agree that this could be fixed here, but I don't know if it would be merged, since the touchable and stylesheet pull-requests have been open for almost 2 months.

Certainly that isn't a good attitude to have on my part, but I needed a fix almost immediately and opted for alias approach instead of a injection package.

Jani Eväkallio · Answer 12 · Wed Aug 23 2017 23:19:45 GMT+0800 (China Standard Time)

I submitted a PR for it in Metro, let's see how that goes facebook/metro#45

Sibelius Seraphini · Answer 13 · Sat Oct 14 2017 19:30:44 GMT+0800 (China Standard Time)

I think we can close this