Skip to content

[0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue) #20150

New issue
New issue
Closed
Closed
[0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue)#20150
Labels
Impact: RegressionDescribes a behavior that used to work on a prior release, but stopped working recently.JavaScriptPlatform: LinuxBuilding on Linux.Resolution: LockedThis issue was locked by the bot.Tech: Bundler 📦This issue is related to the bundler (Metro, Haul, etc) used.
@farwayer

Description

@farwayer
farwayer
opened on Jul 11, 2018 · edited by farwayer
Contributor

Environment

  React Native Environment Info:
    System:
      OS: Linux 4.17 Arch Linux rolling
      CPU: x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
      Memory: 1.06 GB / 7.47 GB
      Shell: 5.5.1 - /bin/zsh
    Binaries:
      Node: 10.6.0 - /usr/bin/node
      Yarn: 1.7.0 - /usr/bin/yarn
      npm: 6.1.0 - /usr/bin/npm
      Watchman: 4.9.0 - /usr/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.2, 26.0.1, 26.0.2, 27.0.0, 27.0.3
        API Levels: 22, 23, 24, 25, 26, 27
    npmPackages:
      react: ^16.4.1 => 16.4.1 
      react-native: ^0.56.0 => 0.56.0 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

Bundler cuts off some used babel helpers in release build. Look like by mistake while optimization.
For example initializerDefineProperty and applyDecoratedDescriptor needed by @babel/proposal-decorators.

2018-07-10-144351_393x122_scrot

Reproducible Demo

{
  "presets": ["react-native"],
  "plugins": [
    ["@babel/proposal-decorators", {"legacy": true}]
  ]
}
"devDependencies": {
  "@babel/plugin-proposal-decorators": "7.0.0-beta.47"
}
function test() {}

class Test {
  @test val;
}
undefined is not a function (evaluating 'babelHelpers.applyDecoratedDescriptor(_class.prototype, "val", [test], {
    enumerable: true,
    initializer: null
  })')

Workaround 1 (can have side effects)

Be care because this workaround can bring some errors with external libs.

For RN 0.56:

yarn add --dev @babel/plugin-transform-runtime@7.0.0-beta.47

.babelrc

{
  "presets": ["react-native"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-transform-runtime", {
      "polyfill": false,
      "regenerator": false
    }]
  ]
}

For RN 0.57:

yarn add --dev @babel/plugin-transform-runtime@7.0.0

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-transform-runtime", {
      "polyfill": false,
      "regenerator": false
    }]
  ]
}

Workaround 2

Move app initialization to some other file (I'm using src/ dir for source) and update root index.js file.
N.B. require main app code instead of import because require executed after.

For RN 0.56:

yarn add @babel/runtime@7.0.0-beta.47

Root index.js

import applyDecoratedDescriptor from '@babel/runtime/helpers/es6/applyDecoratedDescriptor'
import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty'

Object.assign(babelHelpers, {
  applyDecoratedDescriptor,
  initializerDefineProperty,
});

require('./src');

For RN 0.57:

yarn add @babel/runtime@7.0.0

Root index.js

import applyDecoratedDescriptor from '@babel/runtime/helpers/esm/applyDecoratedDescriptor'
import initializerDefineProperty from '@babel/runtime/helpers/esm/initializerDefineProperty'

Object.assign(babelHelpers, {
  applyDecoratedDescriptor,
  initializerDefineProperty,
});

require('./src');

Activity

farwayer
mentioned this in 2 issues on Jul 11, 2018
react-native-bot
added
Platform: LinuxBuilding on Linux.
on Jul 11, 2018
thientnc-ibl

thientnc-ibl commented on Jul 11, 2018

@thientnc-ibl
thientnc-ibl
on Jul 11, 2018

@farwayer
Where can this code be placed?

import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty'
Object.assign(babelHelpers, {applyDecoratedDescriptor, initializerDefineProperty});
require('./src');```
farwayer

farwayer commented on Jul 11, 2018

@farwayer
farwayer
on Jul 11, 2018
ContributorAuthor

@thientnc-ibl This is root index.js file. Put your app code in some other file and require() it at the end of root index.

thientnc-ibl

thientnc-ibl commented on Jul 12, 2018

@thientnc-ibl
thientnc-ibl
on Jul 12, 2018

The RELEASE build is OK now, bravo... We should write this work around to React native 0.56 doc

janicduplessis

janicduplessis commented on Jul 12, 2018

@janicduplessis
janicduplessis
on Jul 12, 2018
Contributor

RN includes its own version of babel-helpers but it does not include the applyDecoratedDescriptor. Facebook probably doesn't use decorators so this went unnoticed. I'll see if we can include it to get this fixed, in the meantime the workaround is valid.

janicduplessis
added
JavaScript
Impact: RegressionDescribes a behavior that used to work on a prior release, but stopped working recently.
and removed
Platform: LinuxBuilding on Linux.
on Jul 12, 2018
react-native-bot
added
Platform: LinuxBuilding on Linux.
on Jul 12, 2018
janicduplessis
mentioned this on Jul 12, 2018
kelset
added
Tech: Bundler 📦This issue is related to the bundler (Metro, Haul, etc) used.
on Jul 13, 2018
CptFabulouso
mentioned this on Jul 16, 2018
alessandro-bottamedi
mentioned this on Jul 16, 2018

53 remaining items

csotiriou

csotiriou commented on Oct 7, 2018

@csotiriou
csotiriou
on Oct 7, 2018

To be honest, I had to hardcode versions beta.47 of the relevant babel packages in order to get it to work. Upgrading to 7.1.2 didn't help.

DaniAkash
mentioned this on Oct 13, 2018
etodanik
mentioned this in 2 issues on Oct 14, 2018
pppluto

pppluto commented on Nov 2, 2018

@pppluto
pppluto
on Nov 2, 2018

for me I need "@babel/core": "^7.0.0" for android

Fsarmento

Fsarmento commented on Nov 6, 2018

@Fsarmento
Fsarmento
on Nov 6, 2018

This issue seams to be solved in 0.57.4 (60b05ca).

We can go back to:

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('myApp', () => App);
tibbus
mentioned this on Nov 8, 2018
Menardi
mentioned this on Mar 1, 2019
Sushant-Sardeshpande

Sushant-Sardeshpande commented on Mar 6, 2019

@Sushant-Sardeshpande
Sushant-Sardeshpande
on Mar 6, 2019 · edited by Sushant-Sardeshpande
Contributor

Getting the same on updating from 0.55 to 0.58.6
Did not get this on the first package install but the next time I did it, getting it ever since

Edit: For me, just a --reset-cache for packager solved it, been working with a copy using 0.55 as well, not sure if that created an issue the second time around....

AdamGerthel

AdamGerthel commented on Mar 26, 2019

@AdamGerthel
AdamGerthel
on Mar 26, 2019 · edited by AdamGerthel

I've tried to understand the workarounds here and if they're still needed or not. I'm running RN using Expo v32.0, and I'm heavily invested in decorators (due to MobX), and I'm getting this error when trying to run the production version.

What do I do? I'm not using AppRegistry and I never have before either. Is that a requirement to fix this? How do I use @babel/runtime?

Update: Finally got it up and running again. Not entirely sure what fixed it in the end, but I upgraded from Babel 6 -> 7 and this is what my babel.config.js looks like:

module.exports = function(api) {
  api.cache(true)

  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['@babel/plugin-transform-react-jsx-source'],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  }
}

I also cleared Expo cache multiple times (expo r -c)

aleclarson
added a commit that references this issue on Mar 26, 2019

Use babel runtime instead of relying on global babelHelpers and regen…

674afdd
t-nanava
added a commit that references this issue on Jun 17, 2019

Use babel runtime instead of relying on global babelHelpers and regen…

768581c
vkkan
mentioned this on Jul 1, 2019
facebook
locked as resolved and limited conversation to collaborators on Sep 18, 2019
react-native-bot
added
Resolution: LockedThis issue was locked by the bot.
on Sep 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Impact: RegressionDescribes a behavior that used to work on a prior release, but stopped working recently.JavaScriptPlatform: LinuxBuilding on Linux.Resolution: LockedThis issue was locked by the bot.Tech: Bundler 📦This issue is related to the bundler (Metro, Haul, etc) used.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @LinusU@lxcid@shinriyo@rborn@ungaro

        Issue actions
          [0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue) · Issue #20150 · facebook/react-native