使用Webpack导入时出现意外的未定义

Question

I have a problem that has never happened to me before: I'm compiling a little basic starter browser web app (with React) using Webpack + Babel 7. I've got three different file:

1. withAuth.js The Auth High Order Component
2. NavBar.js The NavBar Component
3. Login.js The Login Form

If I import the withAuth HOC in the NavBar is everything alright, but if I import the withAuth component in the Login.js file it return 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

This is my Webpack Configuration:

/** 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 */ ]
    }
}

Any one know why my HOC is undefined ?

Edit: I've placed Console Log in the tree file. The result are:

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

Edit 2: This is the files structure:

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

Answer 1

Resolved

After much testing and research throughout the afternoon I came to the solution of the problem. As I said in the question, mine is a larger project and I only partially wrote its structure because I thought the problem was located in those three files.

In reality, the problem was a Circular Dependency problem and not a Webpack configuration problem. In my project I have a module called 'Route' that store all Path and all Component for Path, so I can build the React Router using Array Map function. That module has a function that allow me to Route through path and that can return me a path string to a Component. My problem was due to the fact that this module is often called in the project and this has created a Circular Dependency.

Webpack doesn't show the Circular Dependency during compiling, but I found useful adding a plugin, called CircualDependencyPlugin . This plugin will break Webpack compiling when a Circual Dependency will be found.

Splitting the Route module into two files solved my problem.