【问题标题】：Hot reload crashing after changing sub-file of "folder import"更改“文件夹导入”的子文件后热重载崩溃
【发布时间】：2020-04-26 11:28:21
【问题描述】：

我有一个看起来像这样的项目设置（将其用作 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"

我没有使用博览会。

附注我不知道像这样的“文件夹导入”的 JS 术语是什么所以随意编辑标题，谢谢！

【问题讨论】：

标签： javascript typescript react-native es6-modules

【解决方案1】：

我升级了版本来响应原生 0.61.0 修复了这个错误。对于卡在较低版本的 react native 上的任何人，您可以尝试一些解决方法：

重命名导入

显然重命名导入是一种解决方案：

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

【讨论】：