When Hot reloading is enabled, Requiring a component fails with TypeError: Attempting to change the getter of an unconfigurable property

[adiospace]

Description

Hot reload doesn't work with named exports like that:
components/index.js

import Comp1 from './Comp1'
import Comp2 from './Comp2'
export { Comp1, Comp2 }

Both Comp1 and Comp2 are functional components.

The following error is thrown when hot reloading is enabled and I change something in Comp1:

Requiring module "app/Navigator.js", which threw an exception: Error: Requiring module "app/components/index.js", which threw an exception: TypeError: Attempting to change the getter of an unconfigurable property.

If I change the component into a class based one it works.

Reproducible Demo

Create a new project with react-native init, make a components directory with one functional component:

import React from 'react'
import { Button } from 'react-native'

const MyButton = props => <Button {...props} />
export default MyButton

and an index.js file

import MyButton from './MyButton'
export { MyButton }

and use it in App.js

import { MyButton } from './components'

...

<MyButton title="PressMe" onPress={this.handlePress} />

Now, enable hot reloading, go to MyButton and change something (optional) and save it. You should get a similar error.

Environment

React Native Environment Info:
System:
OS: macOS 10.14
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 735.79 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.11.3/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.3, 25.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.2, 28.0.3
System Images: android-23 | Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.7 => 0.57.7
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

[nonewcode]

Experiencing the same issue.

[nata-sch-21]

Experiencing the same issue. Need solution without using class based components

[lordheart]

Can attest that this also happens to me.
"expo": "^31.0.0",
react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",

pureComponent works fine but if I import a functional component from its own file.... hot reloading stops failed with

"Attempting to change the getter of an unconfigurable property.

AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:241294:24 loadModuleImplementation AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:262:14 guardedLoadModule AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:150:47 metroAccept AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:388:19 AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:334:28 metroAcceptAll AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:333:48 define AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:29:26 AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:27111:31 onmessage AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:27106:30 dispatchEvent AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:24683:31 AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:25824:31 emit AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:5136:42 __callFunction AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:3624:49 AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:3397:31 __guard AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:3578:15 callFunctionReturnFlushedQueue AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2FDevNull%2FDeveloper%2Freact-native%2Fitsme%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js:3396:21"

[leolusoli]

+1 with RN 0.57.8. Did you find any solution? @adiospace

[pie6k]

Would be great to at least know what getter is being changed so it'd might be possible to refactor properly to avoid it.

[itsjgf]

Still happening on RN 0.58.x and 0.59.x

[fadlykayo]

The error is also thrown if you have any subfolder like helpers, constants, assets, etc and having this set up in your index.js, while editing and your hot reloading turn on :

import CurrencyHelper from './Currency';
import StringHelper from './String';
import CreditcardHelper from './CreditcardType';
import ValidationHelper from './Validation';
import RatioHelper from './Ratio';
import MiscHelper from './Misc';

export {
  CurrencyHelper,
  StringHelper,
  CreditcardHelper,
  ValidationHelper,
  RatioHelper,
  MiscHelper,
};

This is really annoying. Is there any fix for this?

[pavelrotek]

this workaround works for me

import C from './Currency;

const CurrencyHelper = C;

export {
  CurrencyHelper
}

[abzeede]

I found that hot reload is not working with "function component" because when i change it to "class component", it's woking fine. I don't know why 😕

[iRoachie]

@hramos @cpojer @grabbou Can you shed some light on what you think might have caused this? Been a bug for the last 10 releases(since 0.57.7).

[ospfranco]

Having the same issue, as hooks become more widespread not being able to hot reload functional components will become more of an issue...

[pie6k]

I can confirm it happens for me when I'm using index exporters in my folders structure eg

I have src/ui/tasks/index.ts

export * from './CheckableTask';
export * from './Editor';
export * from './Task';
export * from './EditableTask';
export * from './NoTasks';

For 'better importing experience'. In this case, hot reloading crashes with TypeError: Attempting to change the getter of an unconfigurable property

Not sure, but I'd say this is quite popular pattern to group imports like this, but it makes hot reloading not usable at all in rn

[jan-timpe]

Happens for me when exporting multiple functional components from one file and using an index exporter, e.g.:

export const Component = props => (
    <View><Text>Component</Text></View>
)

export const OtherComponent = props => (
    <View><Text>Other Component</Text></View>
)

Then exporting the components in an index file

export * from './Components'

Exporting just one of the components from the first file works fine

[EternalChildren]

i will use the below way , and have the same problem. how can we solve it ??

export { default as xxx, aaa } from "./ccc"

in react-native 0.59.4

[janicduplessis]

Seems like the issue is related to some incompatibility with the way hot reloading works and the namespace re-export babel transform. As a workaround you can enable loose mode and it will use a simple assignment instead of Object.defineProperty and fix the error.

Add this @babel/plugin-transform-modules-commonjs config in your .babelrc or babel.config.js file.

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
  ],
  plugins: [
    [
      '@babel/plugin-transform-modules-commonjs',
      {
        strictMode: false,
        allowTopLevelThis: true,
        loose: true,
      },
    ],
  ],
};

[ospfranco]

Just for clarity's sake, you need to apply the configuration for the plugin on it's own array, here is my babel.config.js file:

  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    "@babel/plugin-transform-runtime",
    ["@babel/plugin-transform-modules-commonjs",
      {
        strictMode: false,
        allowTopLevelThis: true,
        loose: true,
      }
    ]
  ]
}

However, even though now simulator does not crash, the changes I make are not being applied, I tried using https://github.com/bvic23/babel-plugin-functional-hmr, but it doesn't seem to work either, any suggestions?

[janicduplessis]

@ospfranco Make sure to start the packager with --reset-cache after making the change. If that doesn’t work I’m not sure, your config looks good.

[panvourtsis]

for me the solution given by @janicduplessis only gave me error. Tried deleting all modules, reseting etc.

My versions is RN 0.59.5, babel core 7.4.0.

Is this a version thing? Anyone else tried that?

[zeritte]

can you please make sure that you dont have functions among your app with the same name. In my case I was trying to export the same named function from 2 different pages and encountered that error. (of course you can have the same named functions but if you are importing all of your actions from redux and there are 2 of them with the same name, that conflict gave me this error.) hope this helps!

[EternalChildren]

try to modify some configurations in tsconfig.json like below
module: "es2015", target: "es2015"
it's work for me.

[panvourtsis]

Thanks for the tip @EternalChildren, my app now is saying that "Application # has not been registered." when i run it with these options

[panvourtsis]

I found that this is not working with react-native-vector-icons that is why i am getting those errors

[yqz0203]

@EternalChildren not work in 0.57.8😿

[EternalChildren]

I guess the reason for this is typescript. everything is ok in javascript.
so it must somewhere is difficult to identify after typescript is compiled. maybe you can try to adjust the "tsconfig.json".
I am in [email protected] and use metro.config.js to complie typescript.

[yqz0203]

Seems like the issue is related to some incompatibility with the way hot reloading works and the namespace re-export babel transform. As a workaround you can enable loose mode and it will use a simple assignment instead of Object.defineProperty and fix the error.

Add this @babel/plugin-transform-modules-commonjs config in your .babelrc or babel.config.js file.

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
  ],
  plugins: [
    [
      '@babel/plugin-transform-modules-commonjs',
      {
        strictMode: false,
        allowTopLevelThis: true,
        loose: true,
      },
    ],
  ],
};

It works, thx.

[jesster2k10]

Hey, thanks @janicduplessis for the fix, it works great but for some reason it breaks the react-native-vector-icons library (which I'm sure many of us may be using)

As soon as you enable the plugin, you get an error saying 'Native Module cannot be null' referring to PushNotificationsIOS. Linking that solves that issue but causes another one along the lines BackAndroid is deprecated, use BackHandler instead (see image for below) despite BackAndroid never being referenced in the library

There seems to be a direct correlation between the plugin/fix and the react-native-vector-icons library. Remove either the plugin or the library will solve the issue.

If anybody knows anything about this that would be great!

[Nirony]

It's amazing to me that this issue still exists.
I'm on RN 0.59.8 , and unfortunate none of the suggestions above worked for me.
The only way I manage to dodge this error is by using one import in the index.js file - which mostly is not the use case.

Having the same issue, as hooks become more widespread not being able to hot reload functional components will become more of an issue...

[clucasalcantara]

Having the same problem here as @ospfranco :( The error is gone but the updated changes are not applied at all :(

[gaearon]

We've completely revamped how this feature works: #18899 (comment).

I'll see whether we fixed this issue. If not, I'll fix it.

[gaearon]

Please send all reproducing cases you have to #18899 as projects I can clone. The more, the better. I'll go through them and verify they're fixed. This is the chance to get them working.

[gaearon]

I have verified this is fixed on master. The fix is part of Fast Refresh which is expected 0.61.

[klawingco]

@gaearon Thank youu!, no more manual reloading for us.

[HemantRMali]

Still happening on 0.59.5

[kiranjd]

@HemanthRMali As @gaearon told, the issue is resolved on 0.61

[gaearon]

I'm locking because this is resolved in 0.61. It won't get resolved earlier, sorry!