Using require('…') with a variable vs. using a string in webpack

Question

I have a problem that doesn\'t make much sense to me.

I\'m mapping an array of objects that have a \"name\" and a \"href\" property.

let appleIcons         


        

Answer 1

Since Webpack is running in build-time, it can't figure out which modules to bundle when the name is a dynamic variable. You can give it hints by specifying part of the path (for example, if you know all the modules are in a single directory).

This answer can help: https://stackoverflow.com/a/33048000

(Also check require.context by Webpack. Another example is karma tests, here.)

Alternatively - if you know the filenames in advanced, it's better to add another build step to output them a strings to the file, that way Webpack can bundle them.

Answer 2

Adding an empty string fixed the problem for me. So, below code should work:

let appleIcons = _.map(appleIcons, appleIcon => {
  appleIcon.href = require('' + appleIcon.href);
  return appleIcon;
});