When a package.json contains both "exports" and "browser" fields, which one wins in Webpack 5?

[jedwards1211]

The docs say

When the exports field is specified, only these module requests are available. Any other requests will lead to a ModuleNotFound Error.

Which seems to suggest that the "browser" field would be ignored if "exports" is present, but it seems like Webpack 5 with default config is still resolving with the "browser" field in some experimentation I did on the yaml package. If this is unintended behavior I could try to fully verify this and create an issue.

It would be good to explicitly document whether "exports" or "browser" in the docs for both fields. It's starting to get really complicated to guess the resolution behavior.

[alexander-akait]

Can you provide example?

[jedwards1211]

For example if I import 'foo' in a browser context and node_modules/foo/package.json contains:

  "main": "./index.js",
  "browser": {
    ".": "./browser/index.js"
  },
  "exports": {
    ".": "./index.js"
  },

Will Webpack resolve the import to node_modules/foo/index.js or node_modules/foo/browser/index.js?

[alexander-akait]

node_modules/foo/index.js (i.e. exports)

[jedwards1211]

Okay. Then if we have (real example from yaml)

  "main": "./index.js",
  "browser": {
    "./index.js": "./browser/index.js"
  },
  "exports": {
    ".": "./index.js"
  },

Then import 'foo' in a browser context will use exports followed by browser and get resolved to node_modules/foo/browser/index.js right?

[jedwards1211]

since exports can have browser conditions in it, there were a lot of potential guesses what the behavior would be:

• If exports is present browser field is ignored
• If subpath and condition exists in exports, browser field is ignored
• If in browser context and browser field is present, exports field is ignored
• If in browser context and subpath exists in browser field, exports is ignored
• Map with browser, then exports
• Map with exports, then browser

Hopefully this illustrates why it would be good to document the interaction between exports and browser. Where in the docs should we add information about this?

[alexander-akait]

https://webpack.js.org/concepts/module-resolution/

[jedwards1211]

Okay, so I had looked in places like
https://webpack.js.org/configuration/resolve/#resolvemainfields
https://webpack.js.org/configuration/resolve/#resolveexportsfields
https://webpack.js.org/guides/package-exports/

None of these places pointed to https://webpack.js.org/concepts/module-resolution/, so I didn't find it. So I'll make a PR to add links in those sections

[jedwards1211]

Wait a minute, https://webpack.js.org/concepts/module-resolution/ seems incorrect.

If the package contains a package.json file, then fields specified in resolve.exportsFields configuration options are looked up in order, and the first such field in package.json determines the available exports from the package according to the package exports guideline.

Once the path is resolved based on the above rule, the resolver checks to see if the path points to a file or a directory. If the path points to a file:

If the path has a file extension, then the file is bundled straightaway.

This seems to say that once import 'yaml' gets resolved with exports to yaml/index.js, since that's a file, it would be bundled straightaway. But it doesn't, it goes on to resolve yaml/index.js with browser to yaml/browser/index.js...

[alexander-akait]

Feel free to open issue/send a fix to docs

[jedwards1211]

Now let's say we import 'foo/subpath' in a browser context with this:

 "browser": {
    "./subpath": "./browser/subpath.js"
  },
  "exports": {
    ".": "./index.js"
  },

It would be an error because ./subpath is missing from exports right?

[sokra]

Yes that would be an error, but if you import ./subpath within the package that would be mapped according to the browser field.

[jedwards1211]

Okay so this is fairly nontrivial, the logic is try to map with exports, then try to map with browser if in the browser context, like the following pseudocode?

function resolve(subpath, pkgJson, context) {
  ...
  if (pkgJson.exports && pkgJson.exports[subpath]) {
    subpath = pkgJson.exports[subpath]
  }
  if (context.isBrowser && pkgJson.browser && pkgJson.browser[subpath]) {
    subpath = pkgJson.browser[subpath]
  }
  ...
}