Javascript 在React with Webpack和Babel中使用静态类属性引发运行时错误

我试图在React中使用静态类属性。但是，在本地运行Webpack服务器时，我不断遇到以下错误：

uncaughttypeerror:\u util\u stagehelp\u Webpack\u IMPORTED\u MODULE\u 3\u。getStageName不是函数

以下是我的代码结构：

// util/stageHelper.js
export class StageEligibility {
    static consentEnabled = StageConfiguration.getEnabled();

    static isEligible() {
        ...
    }

    // some other static properties and functions
}

export const getStageName = (key) => {
    if (StageEligibility.isEligible()) {
        return STAGES[key];
    }
};


// config/StageConfiguration.js
import {getStageName} from '../util/stageHelper'

export class StageConfiguration {
    static config = {
        stageName: getStageName('default') // the code breaks here with the above error
    }
}

我已经搜索了多个帖子，并根据建议设置了我的babel和webpack配置，如下所示：

//.babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

---

我的Jest单元测试都成功了，所以问题似乎出在我的设置上。有人能帮我解决这个问题吗？

听起来像是一个循环依赖性问题。stageHelper.js是否导入导入

StageConfiguration

的任何内容？单元测试可能以不同的顺序（从不同的入口点）加载模块，在定义类之前初始化

getStageName

常量。这是一个很好的观点

stageHelper.js

直接导入

StageConfiguration

类，该类在

StageEligibility

类中使用。您对如何执行此操作有何想法？您可以尝试使用

函数

声明，而不是

常量

，对于

getStageName

，它将被提升。但是，如果过早调用函数，则不会初始化

stageEligible.isEligible（）

。似乎这些类在初始化其静态成员时相互依赖。这是不可能的。也许a）不要让它们类（至少移除静态方法）b）决定它们初始化的顺序并相应地编写代码（为了清晰起见，可能将两者放在同一个模块中）或者c）使用延迟执行的getter而不是静态成员值扫描共享/链接整个模块代码？我也许能提出更好的建议，非常感谢你的帮助和解释！出于好奇，我提出了一个后续问题：让他们上课如何解决这个问题？

//webpack.config.js
const config = {
    ...,
    module: {
        rules: [
            {
                test: /\.(js|jsx)?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        plugins: ['@babel/plugin-proposal-class-properties'],
                        cacheDirectory: true
                    }
                },
            }
        ]
    },
    ...
};

module.exports = () => {
    return config;
};