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

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 =, 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 =, 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(”)?


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:

(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.

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

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

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   Why and when to use default export over named exports in es6 Modules?

Similar Posts