I have a problem that has never happened to me before: I'm piling 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 ponent 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-ponent/
| |-auth/
|   |-withAuth.js
|
|-layout-ponent/
| |-navbar/
|   |-index.js
|
|-pages/
  |-auth/
    |-login.js

I have a problem that has never happened to me before: I'm piling 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 ponent 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-ponent/
| |-auth/
|   |-withAuth.js
|
|-layout-ponent/
| |-navbar/
|   |-index.js
|
|-pages/
  |-auth/
    |-login.js

• javascript
• reactjs
• webpack

• 2 Try using path.resolve(__dirname, 'path/to/hoc/folder') or any other variant that yields an absolute path – Avin Kavish Commented Jun 29, 2019 at 14:30
• Hello Marco, are withAuth.js, NavBar.js and `Login.js in the same directory? – Nico Diz Commented Jun 29, 2019 at 14:31
• The alias.HOC property has been reduced here in StackOverflow to let you know that there is an alias pointing to withAuth. The three files are in separated folders. But I don't know why one ponent (the NavBar) load the HOC correctly and the other (Login) no... – Marco Cavanna Commented Jun 29, 2019 at 14:33
• 1 I've got the error! It was a circular dependency that will break Webpack require function, I'll update the answer with some useful tips – Marco Cavanna Commented Jun 29, 2019 at 16:45
• 1 You can answer your own question if you solved it. Can you elaborate what you mean by circular dependency, have you imported two ponents into each other? – Avin Kavish Commented Jun 29, 2019 at 17:09

1 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 piling, but I found useful adding a plugin, called CircualDependencyPlugin. This plugin will break Webpack piling when a Circual Dependency will be found.

Splitting the Route module into two files solved my problem.