Search code examples
webpackwebpack-2package.jsondead-codetree-shaking

Webpack doesn't respect 'module' field in package.json


I am trying to figure out tree-shaking in Webpack and I noticed that running -webpack -optimize-minimize on this Example1 is 11kB, while on Example2 it is 7kB.

The library Rambda has a field module in its package.json. As far as I can see Webpack doesn't respect it and I need to explicitly refer to the esm file location.

The question is that a bug or a feature?

Example1

import {add} from 'rambda'

function fn(x) {
  return add(2)(x)
}
console.log(fn(3))

Example2

import {add} from 'rambda/dist/rambda.esm.js'

function fn(x) {
  return add(2)(x)
}
console.log(fn(3))

Solution

  • I found that this is a documented bug - https://github.com/webpack/webpack/issues/4674

    What is the current behavior? When module's package.json contains browser, module & main fields, webpack is bundling browser build by default.

    The bug is unresolved for 6 months so the solution is ugly - remove browser field from package.json, so Webpack can use module field.