Webpack: Error: configuration.resolve.extensions[0] should not be empty

The problem

You just started a new webpack project and happily copied over an old webpack configuration to make a few tweaks to get the project set up. Or, maybe you decided suddenly to upgrade our webpack package. Suddenly, when you run webpack, you see the following error:

configuration.resolve.extensions[0] should not be empty

The solution

If you encounter this error, then it is more than likely you are using webpack version 2 and haven’t migrated your webpack version 1 configuration over yet.

In webpack, we use the resolve section of the configuration file to declare how to resolve files, as well as what file types/extensions we can process without explicitly giving the file extension in the imports. (e.g. require(“./login”) rather than require(“./login.js”)) This hasn’t changed in webpack version 2, but what has changed is that we no longer use the empty string ('') to represent files with no extension. Instead, we have to use an asterisk ('*').

For example, instead of this:

resolve: {
	extensions: ['', '.js', '.es6']
}

In webpack version 2, we do this:

resolve: {
	extensions: ['*', '.js', '.es6']
}

Background

Lots of things changed with webpack version 2, which means that we need to make some updates to get up to speed with the new version.

For a more detailed migration guide for webpack version 1 to webpack version 2, check here: https://webpack.js.org/guides/migrating/.

Additional Resources

Leave a Reply

Your email address will not be published. Required fields are marked *