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

[sag1v]

@tgelu I agree with your point, i think both require() and import() should treat the same way when a module is missing.

Already fixed for any import(...) - https://github.com/webpack/webpack/blob/main/lib/dependencies/ImportParserPlugin.js#L299 and https://github.com/webpack/webpack/blob/main/lib/dependencies/ImportParserPlugin.js#L334

Thanks 🙏🏽@alexander-akait
Since which version is this fixed?

[alexander-akait]

Yeah

[sag1v]

@alexander-akait I mean what version of webpack has this fix? 😃

[alexander-akait]

https://github.com/webpack/webpack/releases/tag/v5.90.2

make dynamic import optional in try/catch

[tgelu]

thank you very much! 🙏

[sag1v]

It seems to work indeed, but it does produce a "side effect", it will create a chunk for each dynamic import.

Maybe we can disable the creating of the chunk with /*.webpackMode: "eager" */ but this will bring back the errors and build failure.

[alexander-akait]

@sag1v Can you create reproducible test repo? eager mode should work

[sag1v]

I will try this weekend