Hot reload crashing after changing sub-file of "folder import"

I have a project setup that looks like this (use this as an MVCE):

src/
  styles/
    index.ts
    common.ts
  app.tsx

The code in index.js looks like this:

import CommonStyles from "./common.ts";
export { CommonStyles };

common.ts looks like this:

import { StyleSheet } from "react-native";

const CommonStyles = StyleSheet.create({
    example: {
        width: "50%",
        height: "50%",
        backgroundColor: "red"
    }
});
export default CommonStyles;

From app.tsx i import these styles like this:

import React from "react";
import { View } from "react-native";
import { CommonStyles } from "./styles";

function App() {
    return (
        <View style={CommonStyles.example} />
    );
}

export default App;

The problem is that, when I change the style in common.ts (e.g. width: "75%") then save it, the app crashes with this error:

Requiring module "src\styles\index.ts", which threw an exception: TypeError: Attempting to change the getter of an unconfigurable property.

Versions

react-native-cli: 2.0.1   

"react": "16.8.6""react-native": "0.60.5"

I am not using expo.

P.S. I don't know what the JS term for "folder importing" like this is so feel free to edit title, thanks!