Сбой горячей перезагрузки после изменения подфайла «импорта папки»

Question

У меня есть настройка проекта, которая выглядит следующим образом (используйте это как MVCE):

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

Код в index.js выглядит следующим образом:

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

common.ts выглядит так:

import { StyleSheet } from "react-native";

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

Из app.tsx я импортирую эти стили следующим образом:

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

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

export default App;

Проблема в том, что когда я меняю стиль в common.ts (например, width: "75%") затем сохраните его, приложение вылетает с этой ошибкой:

Требуется модуль "src\styles\index.ts", который выдал исключение: TypeError: Attempting to change the getter of an unconfigurable property.

Версии

react-native-cli: 2.0.1   

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

Я не использую expo.

PS Я не знаю, что такое термин JS для «импорта папки», как это, так что не стесняйтесь редактировать заголовок, спасибо !

Answer 1

Я обновил версии, чтобы отреагировать на родную 0.61.0, которая исправляет эту ошибку. Для тех, кто застрял на более низких версиях реагировать на нативную версию, можно попробовать несколько способов:

Переименовать импорт

Очевидно, что переименование импорта является одним из решений:

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

Включить свободный режим

Добавление этого к вашему .babelrc или babel.config.js также должно работать:

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