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 = _.map(appleIcons, appleIcon => {
  appleIcon.href = require(appleIcon.href);
  return appleIcon;
}); 

Inside of the loop I want to require the image but it throws an error ".*$:11 Uncaught Error: Cannot find module".

When I print the value of appleIcon.href and i try to put it directly into the require('') it works.

appleIcons = _.map(appleIcons, appleIcon => {
  appleIcon.href = require('./../../mobile-config/apple-icon-57x57.png');
  return appleIcon;
});

So can you explain me why the second example works and the first one throws an error? How do i put a variable inside of require('')?

Thanks!

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;
});