Search code examples
javascriptwebpackwebpack-2

'unknown exports provided' meaning in webpack's output file

When I set output.pathinfo to true in webpack.config.js i get this esoteric description with each bundled module in output file:

/* unknown exports provided */

What does it mean?

Edit:

I have been transpiling code from typescript which caused webpack to not recognize exports (but it was able to infer which exports has been used). I tweaked my typescript config to remedy this (I have set module option to ES2015).

Solution

  • output.pathinfo adds comments to each module to help you identify them and their exports. You'll see that the path of the module is present and above that it shows the exports of the module and which ones are actually used. When a module has no exports it will show unknown exports provided.

    Consider this example with the following three files.

    index.js (entry point)

    import { one } from './module';
import printNumber from './otherModule';

printNumber(one);

    module.js

    export const one = 1;
export const two = 2;
export const three = 3;

export default () => console.log('default export');

    otherModule.js

    export default number => console.log(`The number is ${number}`);

export const notUsed = 'not used';

    In index.js there is no export and the comments reflects that. Since it has no exports, it automatically means that all exports are used.

    /* unknown exports provided */
/* all exports used */
/*!******************!*\
  !*** ./index.js ***!
  \******************/

    On the other hand, module.js has four exports: default, one, two and three. From these exports only one is used in any of the files that are included by webpack (in this case it's only imported in index.js). The comment tells us exactly this.

    /* exports provided: one, two, three, default */
/* exports used: one */
/*!*******************!*\
  !*** ./module.js ***!
  \*******************/

    Similarly otherModule.js has two exports default and notUsed, where only the default export is used (again in index.js).

    /* exports provided: default, notUsed */
/* exports used: default */
/*!************************!*\
  !*** ./otherModule.js ***!
  \************************/

    Remember that import X from 'module' imports the default export from module and assigns the name X to it.

    This information can be useful in development to see what exports are actually used throughout your application. In the example shown it's very easy to see what's being used, but in a bigger application you might find this feature helpful.

    Note: The unused exports will be removed from the bundle when you optimise it with any tool that does dead code elimination (e.g. UglifyJS).