Cannot seem to use a JavaScript variable in require for dynamic import in React

Question

I'm using react-google-maps but I think my question applies a general user case. I want to dynamically load an icon, using a url passed in as a prop. But I find if I use a variable I get an error. Please see below:

When I require and icon using a string it works fine e.g.

icon={require('../assets/myPng.png')}

But if my png path is a variable for example

let url = '../assets/myPng.png'

icon={require(`${url)`}

I get error:

cannot find module '../assets/myPng.png'

Can anyone tell me what is going on ?

if I use icon={require(url}, that fails also.

Might be worth looking into this technique if you want to have dynamic imports. — Tholle
– Tholle, Commented Mar 15, 2019 at 12:15

soywod · Accepted Answer · 2019-03-15 11:50:34Z

2

It's better to use require(...), so the path will be managed by your package manager. If you use directly a string, it will bypass it, and you will get the error. I would advise to use:

const icon = require('../assets/myPng.png')
// ...
<MapComponent icon={icon} ... />

answered Mar 15, 2019 at 11:50

soywod

4,5784 gold badges29 silver badges50 bronze badges

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

4 Comments

Scriptkiddy1337 Over a year ago

why not just const { icon } = require('../assets/myPng.png'); ?

soywod Over a year ago

Because require(...) usually returns a string when used on a picture, not an object. You will get undefined here.

dorriz Over a year ago

Thanks for your comments , but I need to have the require(...) use a variable and to dynamically load the icon depending on the user, I cannot use hardcode a string . I see npm dynamic-import and will try that , but from more investigation it seems impossible to dynamically require something in the way I want - unfortunately I cannot use import.

soywod Over a year ago

Well, import can be used dynamically, see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

Cannot seem to use a JavaScript variable in require for dynamic import in React

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related