Hot Module Replacement is buggy with TS

[ScreamZ]

🐛 Bug Report

Hello,

I'm getting a HMR issue with ts barrels, along my styled-component styling…

To Reproduce

https://snack.expo.io/@screamz/hmr-issue

Download this expo project on local and run npm i && npm i -g expo-cli && expo start

Activate HMR by shaking device, then go to assetExample and change color: green to color: blue.

See that the app is crashing with HMR enabled saying « Attempting to change the getter of an unconfigurable object ». This is an issue with the barrel index.ts but i can't get it why ?

Expected Behavior

This shoumd HMR correctly

Code Example

https://snack.expo.io/@screamz/hmr-issue

Environment

React native > 57 and / or expo @ latest
Typescript (didn't tested without specifically but what I do is ESM compliant)

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[ScreamZ]

Done

[hramos]

Are you certain this is an issue with React Native? It looks like you're using Expo.

[ScreamZ]

I'm certain this is related to React-native, I'm not using an expo project for my real project.

What I'm not certain is :

• Is it a typescript compiler issue ?
• Is it a babel transpiler issue ? A babel with TS issue ?
• Is it React Native HMR issue ?

The thing is it works as long you don't patch the file and it get hot reloaded.

Once you patch, this is yelling that you are doing some kind of redeclaration which is not allowed.

If you're not re-exporting everything goes fine…

[itsjgf]

I think this issue is the same as the one explained in #22592.

It started happening after 0.56 (when react-native / metro were upgraded to Babel 7) was released and it affects .js files as well.

[ScreamZ]

@itsjgf Yep, looks really like this…

[hramos]

Duplicate of #22592

[hramos]

I added the previous comment in order to link this issue to #22592. Let me know if we should close this.

[ScreamZ]

I don't know… You're the ticket manager ahah

Looks like it's the same issue yeah, i'll try the wordaround given

import C from './Currency;

const CurrencyHelper = C;

export {
  CurrencyHelper
}

In order to await

EDIT: seems related to #22592

[amed]

Create an index wrapper for components is apparently the issue.
As @ScreamZ has given, this was a workaround to fix it.