CODEWITHSUNDEEP
javascriptnode.jsrequirejswebpackrequire
Shannon Hochkins
Shannon Hochkins

Reputation: 12186

Dynamic file path in require with webpack?

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?

Upvotes: 6

Views: 5523

Answers (2)

padurets
padurets

Reputation: 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`);
	}
}

Upvotes: -1

daniele bertella
daniele bertella

Reputation: 725

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.

Upvotes: 3

Related Questions