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

+1 It’s really annoying. RN 0.57.8

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

Still happening on RN 0.58.x and 0.59.x

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

this workaround works for me

import C from './Currency;

const CurrencyHelper = C;

export {
  CurrencyHelper
}

Experiencing the same issue.

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!

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 😕

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,
      },
    ],
  ],
};

Please send all reproducing cases you have to https://github.com/facebook/react-native/issues/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.

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

Still happening on 0.59.5

We’ve completely revamped how this feature works: https://github.com/facebook/react-native/issues/18899#issuecomment-506881769.

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

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…

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?

@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.

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?

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

There is the same problem. From behind it a new project started on Flutter. There is no such problem with Flutter.