我遇到了一个以前从未遇到过的问题：我正在使用 Webpack + Babel 7 编译一个小型的基本入门浏览器 Web 应用程序（使用 React）。 我有三个不同的文件：

1. withAuth.js Auth 高阶组件
2. NavBar.js NavBar 组件
3. Login.js 登录表单

如果我在 NavBar 中导入 withAuth HOC，则一切正常，但如果我在 Login.js 文件中导入 withAuth 组件，它会返回 undefined

/** withAuth.js */

console.log('withAuth Loaded');

const withAuth = Child => ChildProps => (
    <AuthContext.Consumer>
        { authClient => <Child {...ChildProps} authClient={authClient} }
    </AuthContext.Consumer>
)

export { withAuth };


/** NavBar.js */
import { withAuth } from 'HOC/Auth';

console.log('NavBar Loaded', withAuth); // <- My HOC

const NavBarComponent = (authClient) => { /* ... My Code ... */ }

const NavBar = withAuth(NavBarComponent);

export default NavBar;


/** Login.js */
import { withAuth } from 'HOC/Auth';

console.log('Login Loaded', withAuth); // <- undefined ??

const LoginFormComponent = (authClient) => { /* ... My Code ... */ }

const LoginForm = withAuth(LoginFormComponent);
//                /|\
//                 |
//    Will produce an Error, withAuth is Undefined

这是我的 Webpack 配置：

/** webpack.config.js */

module.exports = {
    entry: { core: 'index.js' },
    resolve: {
        alias: {
            HOC: './path/to/hoc/folder'
        }
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all'
        }
    },
    plugins: [ /* Various Plugin */ ],
    module: {
       rules: [ /* My Rules */ ]
    }
}

有人知道为什么我的 HOC 未定义 ？

编辑： 我已将控制台日志放入树文件中。结果是：

'Login Loaded' - undefined
'withAuth Loaded'
'NavBar Loaded' - function() { }

编辑 2： 这是文件结构：

app/
|-high-order-component/
| |-auth/
|   |-withAuth.js
|
|-layout-component/
| |-navbar/
|   |-index.js
|
|-pages/
  |-auth/
    |-login.js