Неожиданный неопределенный при импорте с Webpack

Question

У меня есть проблема, которая никогда не случалась со мной раньше: я собираю небольшое базовое веб-приложение для начинающих (с React), используя Webpack + Babel 7. У меня есть три разных файла:

1. withAuth.js Компонент высокого порядка Auth
2. NavBar.js Компонент NavBar
3. Login.js Форма входа

Если я импортирую withAuth HOC в NavBar, все в порядке, но если я импортирую компонент withAuth в файле Login.js, он возвращает 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 undefined?

Edit: Я поместил Console Log в файл дерева. Результат:

'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

Answer 1

Решено

После долгих испытаний и исследований в течение дня я пришел к решению проблемы. Как я уже сказал в этом вопросе, мой проект является более крупным, и я только частично написал его структуру, потому что я думал, что проблема находится в этих трех файлах.

На самом деле проблема была в проблеме циклической зависимости, а не в конфигурации веб-пакета. В моем проекте у меня есть модуль под названием «Маршрут», в котором хранятся все пути и все компоненты для пути, поэтому я могу построить React Router, используя функцию Array Map. Этот модуль имеет функцию, которая позволяет мне Маршрут через путь и которая может вернуть мне строку пути к Компоненту. Моя проблема была связана с тем, что этот модуль часто вызывается в проекте, и это создает круговую зависимость.

Webpack не показывает циклическую зависимость во время компиляции, но я нашел полезным добавить плагин под названием CircualDependencyPlugin . Этот плагин прервет компиляцию Webpack, когда будет обнаружена круговая зависимость.

Разделение модуля Route на два файла решило мою проблему.