Unhandled JS Exception: Syntax Error

[brunolemos]

Couldn't make it work on React Native.

{
  "presets": [
    "es2015",
    "react-native",
    "react-native-stage-0/decorator-support"
  ],
  "plugins": [
    "transform-es2015-parameters",
    ["extensible-destructuring", {"mode": "optout", "impl": "safe"}]
  ]
}

[cooperka]

@brunolemos I think this is a dupe: https://github.com/vacuumlabs/babel-plugin-extensible-destructuring/issues/14. Can you try again on latest version of RN?

[lucaslz2020]

@cooperka The same error.

• dependencies

  "dependencies": {
  "extensible-runtime": "^4.0.1",
  "immutable": "^3.8.1",
  "react": "16.0.0-alpha.6",
  "react-native": "0.43.3"
  },
  "devDependencies": {
  "babel-jest": "19.0.0",
  "babel-plugin-extensible-destructuring": "^4.0.1",
  "babel-preset-react-native": "1.9.1",
  "jest": "19.0.2",
  "react-test-renderer": "16.0.0-alpha.6"
  },

• .babelrc

  {
  "presets": [
  "react-native-stage-0/decorator-support"
  ],
  "plugins" : [
  ["extensible-destructuring", { "mode": "optout", "impl": "immutable" }]
  ]
  }
  or 
  {
  "presets": [
  "react-native"
  ],
  "plugins" : [
  ["extensible-destructuring", { "mode": "optout", "impl": "immutable" }]
  ]
  }

[cooperka]

Thanks for the info @lucasleelz. I think this may be fixed by an upcoming PR. Feel free to check out the code and try it yourself: https://github.com/vacuumlabs/babel-plugin-extensible-destructuring/pull/20

[lucaslz2020]

Hi @cooperka

To resolve try the following: + Clear watchman watches: watchman watch-del-all. + Delete the node_modules folder: rm -rf node_modules && npm install. + Reset packager cache: rm -fr $TMPDIR/react-* or npm start --reset-cache.

It seems can not be resolved。

[cooperka]

I started getting this error again as of RN v0.43; I made a PR to improve debug messages: https://github.com/facebook/react-native/pull/13561. You can manually copy the changes there into your node_modules/react-native (at least until the PR is published in the next version) to get a better idea of what's going wrong.

For me, module.exports is being transformed strangely and the error reason is Unexpected keyword 'var'. This occurs in several places, not just for moment-timezone:

Working bundled code using mode optin:

__d(/* moment-timezone/data/packed/latest.json */function(global, require, module, exports) {
module.exports = module.exports = {
    "version": "2017b",
...

Failing bundled code using mode optout:

__d(/* moment-timezone/data/packed/latest.json */function(global, require, module, exports) {
module.exports = var __extensible_get__ = require("extensible-runtime").immutable;

module.exports = {
    "version": "2017b",
...

I'll try to diagnose further, but for now I'm just continuing to use mode optin.

[tomaskulich]

well, it seems that during the babelification (or, during the bundling) the var __extensible_get__ = require("extensible-runtime").immutable; gets placed on a really bad place - I don't understand why this is so.

Normally, I'd expect that babel will ignore files from node_modules. Even if babel was transpiling them, I would expect the result being OK file with just one extra (unneeded) require statement at the beginning.

Possible fix might be not to add the require statement if it is not necessary. This should exclude transpiling node_modules (they are already babelified). Also, it would a nice property to have - no need to require __extensible_get__ if you are not using it.

[lucaslz2020]

@cooperka Again the problem is wrong

Failed to execute source code: Unhandled JS Exception: ReferenceError
Unhandled JS Exception: ReferenceError
-[RCTJSStackFrame objectForKeyedSubscript:]: unrecognized selector sent to instance 0x618000043ff0

Removed

  "plugins" : [
    ["extensible-destructuring", { "mode": "optout", "impl": "safe" }]
  ]

But, don't destructuring assignment with immutable.js How to solve it?

[vincentjames501]

+1

[kimown]

Same error, I want to use immutable.js in my RN project .

RN version:0.38.0

I use mode optout, impl immutable in .babelrc , then I start the RN project,

Then I download the bundle file, and rename to index.android.bundle?platform=android.js, and run node index.android.bundle?platform=android.js

@tomaskulich I only know a little about babel plugin, I use babel-plugin-extensible-destructuring in many production projects and these projects are all raect web projects, I really thank you for you work. Today it my first time try to use this plugin in RN project, does this plugin doesn't work in RN project?