Dynamic file path in require with webpack?

Question

This works fine when i manually request the file using require, however the moment i use the exact same request, but change the string so that it's split up with variables it fails.

This works great:

module.exports = (function() {
    var $svg = require('svg-inline!../../assets/svgs/global/connected.svg');
    console.log($svg);
}());

However if I was to do this:

module.exports = (function() {
    var $path = '../../assets/svgs/global/';
    var $svg = require('svg-inline!'+$path+'connected.svg');
    console.log($svg);
}());

It fails and says inside the console:

Uncaught Error: Cannot find module "."

I guess my question is why can't you concatenate strings like i have here?

github.com/webpack/webpack/issues/118

Amiram Korach
– Amiram Korach

2016-09-13 06:44:38 +00:00
Commented Sep 13, 2016 at 6:44 — Amiram Korach
– Amiram Korach, Commented Sep 13, 2016 at 6:44

daniele bertella · Accepted Answer · 2016-10-10 10:11:47Z

3

I think you have to look into webpack context. Basically when you try to require something that contains an expression, webpack will create a context. That expression will be treated as a regular expression and it doesn't work as you may expect.

answered Oct 10, 2016 at 10:11

daniele bertella

7251 gold badge7 silver badges14 bronze badges

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

Comments

padurets · Accepted Answer · 2018-01-12 05:14:08Z

-1

Try:

require(`svg-inline!${$path}connected.svg`)

and if you need more variable in your dynamic path try split require:

function getIcon(name) {
	const [category, filename] = name.split(":");

	if (filename) {
		return require(`one_directory/icons/${category}/${filename}.svg`);
	} else {
		return require(`two_directory/icons/${name}.svg`);
	}
}

answered Jan 12, 2018 at 5:14

padurets

1

Collectives™ on Stack Overflow

Dynamic file path in require with webpack?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related