Webpack fails when importing module

[ninjamar]

Bug report

What is the current behavior?
I try to import the dedent module

import dedent from 'https://cdn.jsdelivr.net/npm/dedent@1.5.3/+esm';

but webpack fails with

ERROR in external "https://cdn.jsdelivr.net/npm/dedent@1.5.3/+esm"
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
Error: The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script

webpack.config.js

module.export = {
    entry: "./foo.js"
}

foo.js

import dedent from 'https://cdn.jsdelivr.net/npm/dedent@1.5.3/+esm';

dedent`
    Foo
    Bar
    Baz
`;

If the current behavior is a bug, please provide the steps to reproduce.
Run webpack on code that has import dedent from 'https://cdn.jsdelivr.net/npm/dedent@1.5.3/+esm';

What is the expected behavior?
The expected behavior is that webpack bundles the module.

Other relevant information:
webpack version: 5.91.0
Node.js version: 17.9.1
Operating System: macOS 14.1.1 (M1)
Additional tools:

[alexander-akait]

Beucase by default we don't know your environment (I don't know about import(...) support), so you need to set target or enable ES modules output

[alexander-akait]

Here you can find how we undestand it - https://github.com/webpack/webpack/blob/main/lib/config/target.js#L311

[alexander-akait]

So if you need to bundle for browser, you need to set target: ["web", "es2020"] or you can use browserslist and we automatically load it

[ninjamar]

Thank you

[mbrodala]

Can you explain in more detail what should be in browserslist specifically to enable ES2020 and thus dynamic import?