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!

Ivan Ganev · Accepted Answer · 2020-09-11 10:24:00Z

30

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.

edited Sep 11, 2020 at 10:24

Ivan Ganev

386 bronze badges

answered May 15, 2016 at 18:16

lyosef

6,2422 gold badges29 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deepak · Accepted Answer · 2019-09-14 22:41:22Z

6

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

answered Sep 14, 2019 at 22:41

Deepak

2,7673 gold badges25 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related