How does one dynamically import optional dependencies?

[tgelu]

I cannot either figure it out from the docs or from other sources online the answer to this question:

How can I dynamically import a package (eg. import('abc')) which is an optional peer dependency?

I am building a library which has optional features that dynamically import the optional peer dependencies. The app consuming my library tries to build with webpack. But this will result in the build failing with ModuleNotFoundError if the optional peer dependency isn't there. But since the dependency is optional (defined in package.json) this is wrong. If I instruct webpack to ignore the import with a magic comment then the dependency isn't bundled in case it's there, so it will always be missing. I just can't find the middle ground where I can just:

import('abc')
  .then(/* the peer dep is there */)
  .catch(/* do something in case the optional peer dep isn't there*/)

This seems like an obvious use-case to me, since package managers allow one to express the requirement of an optional peer dependency. Am I having a wrong expectation?

I know that some libraries take the approach of exposing a different entry point for the optional feature but that's besides the point, because that doesn't relate to dynamic imports.

I also know that this works if one wants to require the package in a try...catch, but that's also besides the point. (and not feasible in my case anyway)

[alexander-akait]

Please read #11874, shortly - your browser versions (in browserslist or in the target optin in webpack.config.js) are not supported async function, but you ask webpack to generate them

[tgelu]

Thank you for the reply!

This is very similar to what we do at the moment.

async function loadMyModule(catchCallback, finallyCallback) {
  let loaded = false;

  try {
    loaded = await import('abc')
  } catch (err) {
    // Logic when it doesn't found
    await catchCallback();
  } finally {
    await finallyCallback();
  }
}

But please help me understand if I am missing some webpack config or maybe something else, because this works only when abc is there. If it is not, then I get a build time error even with my import being in a try...catch:

ModuleNotFoundError: Module not found: Error: Can't resolve '@react-aria/focus'

Does this mean I must mark abc as external?

[alexander-akait]

Yes, you need to make abc external, because it is not a part of your build and can doesn't exist

[tgelu]

I see. And this leads me back to my initial point. If I make it an external then I won't be able to actually have webpack include it in my build in case it is there (since it's an optional dependency).

I will try to restate the initial question because I think I did not make my question clear enough and we're talking past each other :)

try {
  var x = require('abc')
} catch (_) {
  // do something else now
}

1. If abc is present at build time, it will be included in the build and required at runtime. All good.
2. But the above require will not fail the build even if abc is not resolved. That will simply be handled in the catch at runtime. (I even think webpack replaces the require with a throw).

try {
  var x = await import('abc')
} catch (_) {
  // do something else now
}

Now that I switched it to a dynamic import point 1) is still true:

1. If abc is present at build time, it will be included in the build and imported at runtime. All good.
2. But if abc is not there at build time, I can't even get the build to pass now, even if my import is in a try...catch. If I make it an external then point 1) won't be true anymore.

So point number 2) is different in the above two cases without any justification. I expected point 2) to be the same in both cases.

I hope this clarifies what I meant.

[alexander-akait]

I see the problem, how you setup externals?

But the above require will not fail the build even if abc is not resolved. That will simply be handled in the catch at runtime. (I even think webpack replaces the require with a throw).

Using:

externals: {
  abc: false
}

Generates:

WARNING in ./src/entry.js 3:10-24
Module not found: Error: Can't resolve 'abc' in '/home/akait/IdeaProjects/webpack/src'

for require, do you expected this for import(...)? i.e. a warning?

Note - webpack still generates output for await import('abc') case

[alexander-akait]

If yes - feel free to send a PR, the fix is easy, just put:

dep.optional = !!parser.scope.inTry;

after https://github.com/webpack/webpack/blob/main/lib/dependencies/ImportParserPlugin.js#L289