I am requiring all files from a directory with webpack require.context like so:

export default class Svg {
    constructor() {
        const icons = require.context('example/images', true, /\.svg$/);
    }
}

This work fine but I would like to pass a path to my constructor and set the require.context path with either the constructor value if given or a default if it is not given.

Using a variable like this results in an error though:

const icons = require.context(path, true, /\.svg$/);

WARNING in ./src/Svg.js
11:20-27 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Is there a way to get around this or am I simply abusing the require.context functionality here?

I am requiring all files from a directory with webpack require.context like so:

export default class Svg {
    constructor() {
        const icons = require.context('example/images', true, /\.svg$/);
    }
}

This work fine but I would like to pass a path to my constructor and set the require.context path with either the constructor value if given or a default if it is not given.

Using a variable like this results in an error though:

const icons = require.context(path, true, /\.svg$/);

WARNING in ./src/Svg.js
11:20-27 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Is there a way to get around this or am I simply abusing the require.context functionality here?

• javascript
• webpack
• webpack-dev-server
• webpack-2

• This should be working fine. You've said, "Using a variable like this results in an error though" and the message posted says "WARNING", in all caps even. Am I missing something or are you interpreting this warning message as an error? – Marko Gresak Commented Jul 26, 2017 at 13:08

1 Answer 1

Unfortunately you can't, because it must be statically analyzable.

Read webpack issue #4772.

This may change in the future release, now Webpack is on version 4.