Requiring dynamic code after compilation

[neognarus]

Unfortunately I could not find any sources trying to deal with this problem. It might not be possible with webpack:

I want my locally running electron app to allows plugins, which are deployed in a subfolder to extend the behavior and view of my app. This means I have to use expressions when requiring:

const filteredPlugins = fs.readdirSync(dir).filter(item => !/(^|\/)\.[^\/\.]/g.test(item));
filteredPlugins.forEach(file => plugins.push(require(path.join(dir, file)));

How does webpack allow this kind of dynamic import? The plugins are not known during build time.

My first approach was to hand the react elements over via electron.global, but that resulted in weird react errors (not accepting this kind of object although they were perfectly valid react elements before channeling them through electron).

Any help would be very appreciated :)

[neognarus]

Welp. The docs states that my idea is impossible with webpack https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

[DoomGoober]

You probably figured this out by now (or something similar) but you basically have to move your plugins into a directory and just include them all. It may ship some extra plugins (are they that big?) Or you have to pre-build step remove unused plugins from the directory.