Optional dependencies: as explained in #7713

[corwin-of-amber]

Feature request

The issue #7713 has been closed automatically. Despite considerable interest in 2020, it has not been reopened. I only assume that devs do not get notifications for comments and cross-references on closed issues. Hence this new issue.

What is the expected behavior?
Optional dependencies are an NPM feature. In order to use them effectively, the JS code needs access to a mechanism that tells it whether a package actually exists in the project or not. Currently this can be done only with require, which has two downsides:

• It is not the ES6 way. All packages are imported with import, so it's awkward to have to use a different convention.
• Webpack still issues a warning that the imported module is missing, even if require is wrapped in try .. catch.

So, there should be a way to let Webpack know that an import refers to an optional dependency. If a package has been opted out of, it is, in principle, possible to list it as external in webpack.config.js. However, this breaks encapsulation because I would have to list optional dependencies of (recursive) dependencies as well.

What is motivation or use case for adding/changing the behavior?
Should be clear from the previous paragraph.

How should this be implemented in your opinion?
Perhaps an inline annotations along the lines of /* webpackChunkName */? Which would presumably silence the warning and also return undefined as the result of the import. For import { stuff } from 'package' it is a bit trickier, because returning undefined will make the code throw ReferenceError when loaded. I think returning {} or explicitly setting stuff to undefined is acceptable.

Are you willing to work on this yourself?
yes, assuming there is some agreement about the convention that should be used

[vankop]

this will not work with esm, since import x from "x" or import("x") works the same as require("x") when there is no x => this directives should throw error.

---

Problem is that by spec all import x from "x" executes before module, so you can't do try {} catch {}, webpack trying to make esm execution according to spec ( this is expected, since result should be the same if you try to execute code in esm environment, e.g. Node.js ), so I don't see how this could be implemented by webpack..

[vankop]

more straight forward example:

import x from "x" // mark somehow this as optional

will not work in Node.js ( will throw error )

try { require("x"); } catch {}

will work same way in Node.js and webpack bundle.