Duplicated files when mixing "require" and "import" with webpack

Question

I am building an extension for Azure DevOps using Javascript and webpack 5 to bundle all files. After having started with the require() syntax, I tried to move to the ESM import way as recommended by the webpack documentation. There are two dependencies that cause problems, however:

• One dependency I have is the azure-devops-extension-sdk package. Note that it comes bundled with two flavors, one for require and one for ESM. Its package.json contains:

  "exports": {
    "types": "./SDK.d.ts",
    "import": "./esm/SDK.min.js",
    "require": "./SDK.min.js"
  },
  

• Another dependency is the azure-devops-extension-api package, which is published only with the require syntax.

The azure-devops-extension-api package has itself a dependency to azure-devops-extension-sdk. Its published Common\Client.js file contains:

define(["require", "exports", "azure-devops-extension-sdk"], function (require, exports, azure_devops_extension_sdk_1) {
    "use strict";
    ...
}

In my own code, I now try to import both dependencies via

import * as adoSDK from 'azure-devops-extension-sdk';
import * as adoAPI from 'azure-devops-extension-api';

Unfortunately, webpack bundles both versions of the azure-devops-extension-sdk files, i.e. ./esm/SDK.min.js due to my import, and ./SDK.min.js due to the dependency in Common\Client.js. I.e. both SDK files are included in the webpack output, and also used during runtime. The SDK has global side effects and checks that it is loaded only once:

if (global._AzureDevOpsSDKVersion) {
    console.error("The AzureDevOps SDK is already loaded. Only one version of this module can be loaded in a given document.");
}
global._AzureDevOpsSDKVersion = sdkVersion;

This check is triggered because both files are included.

I think it is clear to me why both versions of the SDK are bundled by webpack: The "import" version because I use import, and the "require" version because the API-package does not use import.

Of course I can simply stick to using require in my own code to include both dependencies, and then everything works:

require(['azure-devops-extension-sdk', 'azure-devops-extension-api'], 
    function (adoSDK, adoAPI) {
        // ...
    }
);

However, besides this, is there any way I can use import and tell webpack about the problem? E.g. tell webpack to ignore the ./esm/SDK.min.js file for my import and instead use ./SDK.min.js always? I already tried webpack rules as outlined in this post, but this did not work.