Dynamic require in webpack

Question

i have directory with files.

/web/public/js/core

My core folder consist of: modules, helper, config, styl, core.js, base.js, service.js.

I use webpack for build and in my service.js i use dynamic require.

For example:

config.js

export default {
    modules: {
        validation: 'validation',
        async: 'asyncLoadContent',
        carousel: 'carousel',
        tab: 'tab',
        accordeon: 'accordeon',
        modal: 'modal',
        lightbox: 'lightbox',
        zoom: 'zoom',
        notification: 'notification',
        slider: 'slider',
        rates: 'rates'
    },
    helper: {
        event: 'event',
        css: 'css',
        error: 'error',
        transition: 'transition'
    }

}

service.js In this file I get the Json object from the configuration file I go through it recursively and form the path for loading the module or helper. Accordingly, the modules are located along the path /core/helper, and the modules along the path /core/modules, that is, the directories are different and the path is dynamic.

registrationModule(config, option){

        for(let key in config){

            if(typeof config[key] == 'object' && !this.classes[key]){
                this.classes[key] = {};
                this.registrationModule(config[key], key);
            } else {

                let url = (option == 'modules') ? option + '/' + key + '/' + config[key] : option + '/' + config[key];

                //!!!!! PROBLEM !!!!!!!/
                let module = require("./" + url + '.js').default;

                this.setModule(key, option, module);
            }

        }

    }

Before build i have Warning

WARNING in ./web/public/js/core ^\.\/.*\.js$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./web/public/js/core ^\.\/.*\.js$

And in build i see:

var map = {
        "./base.js": 24,
        "./config/config.js": 26,
        "./helper/css.js": 30,
        "./helper/error.js": 27,
        "./helper/event.js": 31,
        "./helper/transition.js": 32,
        "./modules/accordeon/accordeon.js": 33,
        "./modules/accordeon/accordeon.md.js": 34,
        "./modules/async/asyncLoadContent.js": 35,
        "./modules/carousel/carousel.js": 36,
        "./modules/carousel/carousel.md.js": 37,
        "./modules/lightbox/lightbox.js": 38,
        "./modules/lightbox/lightbox.md.js": 39,
        "./modules/lightbox/lightbox.view.js": 40,
        "./modules/modal/modal.js": 41,
        "./modules/modal/modal.md.js": 42,
        "./modules/modal/modal.view.js": 43,
        "./modules/notification/notification.js": 44,
        "./modules/notification/notification.md.js": 45,
        "./modules/rates/rates.js": 46,
        "./modules/rates/rates.md.js": 47,
        "./modules/slider/slider.js": 48,
        "./modules/slider/slider.md.js": 49,
        "./modules/tab/tab.js": 50,
        "./modules/tab/tab.md.js": 51,
        "./modules/validation/validation.js": 52,
        "./modules/validation/validation.md.js": 53,
        "./modules/zoom/zoom.js": 54,
        "./modules/zoom/zoom.md.js": 55,
        "./modules/zoom/zoom.view.js": 56,
        "./service.js": 25
    }; 

Map consist of: "./base.js": 24, "./service.js": 25.

I understand from what error in the console but how to fix it? How to let understand webpack so that it looks for files only by the way that I want when dynamically forming the path.???

Answer 1

For this specific case, you should be able to work around this with code that makes it clear to Webpack that you only care about helpers and modules, eg

let module;
if (option === "modules") {
    module = require("./modules/" + key + '/' + config[key] + '.js');
} else if (option === "helper") {
    module = require("./helper/" + key + '.js');
} else {
    throw new Error("Unexpected option value;");
}

this.setModule(key, option, module.default);

because the require calls have a specific prefix that Webpack can pick up, it will know you don't care about the root-level files.

Just note however, building custom registration like this makes your dependency graph super hard to follow and makes working with code like this really annoying.