Module not found: Error: Can't resolve 'url' in @azure\keyvault-secrets\dist-esm\keyvault-common\src

[swojit]

• @azure/keyvault-secrets:
• ^4.6.0:
• Windows 11 Enterprise 22H2:
• nodejs
  • 19.3.0:
• browser
  • Edge/108.0.1462.76 (Official build) (64-bit):
• typescript
  • ^4.9.4:

Describe the bug
I see a webpack issue with React:

ERROR in ./node_modules/@azure/keyvault-secrets/dist-esm/keyvault-common/src/parseKeyvaultIdentifier.js 3:0-27

Module not found: Error: Can't resolve 'url' in '.\node_modules\@azure\keyvault-secrets\dist-esm\keyvault-common\src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

To Reproduce
Steps to reproduce the behavior:

1. Create a react app. npx create-react-app my-app --template typescript
2. npm install @azure/identity
3. npm install @azure/keyvault-secrets
4. Here's my App.tsx:

import { useEffect } from 'react';

import { SecretClient } from "@azure/keyvault-secrets";
import { DefaultAzureCredential } from "@azure/identity";

async function main() {
  const credential = new DefaultAzureCredential();
  const keyVaultName: string = process.env["KEY_VAULT_NAME"] || "";
  const url: string = `https://{keyVaultName}.vault.azure.net`;

  const client = new SecretClient(url, credential);
  const secretName = "secretName";
  const secret: string = (await client.getSecret(secretName)).value || "";
  console.log("secret: ", secret);
}


function App() {
  useEffect(() => {
    async function mainCall() {
      await main();
    }
    mainCall();
  }, []);
  return (
    <p>Hello World</p>
  );
}

export default App;

5. npm start

Expected behavior
No build errors

Additional context
Full logs as generated by npm start:

Starting the development server...
Failed to compile.

Module not found: Error: Can't resolve 'url' in 'D:\Repos\my-app\node_modules\@azure\keyvault-secrets\dist-esm\keyvault-common\src'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
ERROR in ./node_modules/@azure/keyvault-secrets/dist-esm/keyvault-common/src/parseKeyvaultIdentifier.js 3:0-27
Module not found: Error: Can't resolve 'url' in '.\node_modules\@azure\keyvault-secrets\dist-esm\keyvault-common\src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

webpack compiled with 1 error
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

Potentially related #19913 #19836

[jeremymeng]

This may have been addressed by PR #24380 where url dependency was removed.

[xirzec]

@jeremymeng would re-shipping keyvault-common address this then?

[jeremymeng]

@xirzec Looks that currently in the repo only keyvault-admin and keyvault-certificates depend on @azure/keyvault-common. Also not sure if we released any version yet after moving to package dependency of keyvault-common.

[timovv]

We haven't GAed any packages that depend on @azure/keyvault-common yet, so re-releasing it wouldn't affect anything -- we'd need to re-release the other packages. But if I understand correctly, this is an issue that would only crop up when building for the browser.

@swojit: it's worth nothing that the Key Vault service, and by extension our Key Vault libraries, do not support the browser due to CORS issues, so even if your example were to build, I wouldn't expect it to work. See here for more details: https://github.com/Azure/azure-sdk-for-js/blob/main/samples/cors/ts/README.md

[timovv]

Closing as the use case is not supported. If this issue crops up when bundling for Node, then we can revisit the issue. Thanks!