javascript - Webpack3: require inside exported module not working -

when trying access module created util.js inside of file use module.exports in webpack, results in empty object @ build time. in image below, const utils = require(...) returns empty object.

however, when inspect const utils = require(...) inside of main script background-script.js , doesn't use module.exports, it's defined.

problem webpack doesn't seem resolving require's inside modules i'm using i'm exporting.

project file structure

  app   ├──plugins   │   ├── index.js (exports plugins)   |   ├──plugin1   |   │   ├── index.js (simply exports object)   |   |   |   |──plugin2   |       ├── index.js (simply exports object)   |   |--utils.js   |--background-script.js 

app/background-script.js

  const utils = require('../../util.js'); 

app/utils.js

  const utils ={....};   utils.plugins = require('./plugins/index.js');   module.exports = utils; 

plugins/index.js

  //require `index.js` file each plugin directory; works great.   const context = require.context('.', true, /index\.js/);   const requireallplugins = function(ctx) {     const keys = ctx.keys();     const values = keys.map(ctx);     return values;   }   const allplugins = requireallplugins(context);   module.exports = [...allplugins];  

plugin1/index.js

  //utils empty object   const utils = require('../../util.js');   module.exports = {action: utils.renderbookmark} 

answering own question

turns out reason why const utils = require('../../utils.js') inside app/plugins/plugin1/index.js returning empty object because had circular/cyclic dependency defined. basically, creating infinite loop way requiring modules. nodejs handles in specific way; returns empty object. see stackoverflow answer here

  //app/background-script.js    const utils = require('../../util.js');     |     |     ↓   //app/utils.js   const utils = {...}   utils.plugins = require('./plugins/index.js');     |     |     ↓     //app/plugins/index.js     const context = require.context('.', true, /index\.js/);     const requireallplugins = function(ctx) {       const keys = ctx.keys();       const values = keys.map(ctx);       return values;     }     const allplugins = requireallplugins(context);     module.exports = [...allplugins];     |     |     ↓     //plugins/plugin1/index.js     const utils = require('../../util.js');      |    module.exports = {action: utils.renderbookmark}     |     ↓   // app/utils.js   const utils = {...}       utils.plugins = require('./plugins/index.js'); //restarts calls above again.     |     |     ↓ node detected circular dependency, instead of repeating these calls again, forever, return `{}` instead. `{}` become     value of `utils` inside `plugins/plugin1/index.js` 

circular dependencies result of bad code organization. solve issue, removed

`require('./plugins/index.js');` utils 

this npm module webpack-cyclic-dependency-checker helped me find cyclic dependency after started sensing had cyclic dependency somewhere in codebase.