reactjs - 尝试使用 React 访问 Azure Key Vault 时无法解析 node_modules 中的 'url' 错误

Question

我是 React 和 Azure 的新手，我正在尝试从 Azure [Key Vault] 获取 secret 值。我收到此编译错误。

我正在使用:“@azure/identity”:“^2.0.4”，“@azure/keyvault-secrets”:“^4.4.0”

import React, { useState } from 'react';
import { SecretClient } from "@azure/keyvault-secrets";
import { DefaultAzureCredential } from "@azure/identity";

export const KV = () => {
    const [secret, setSecret] = useState("");
    const credential = new DefaultAzureCredential();
    const client = new SecretClient("https://xxx.vault.azure.net/", credential);
    client.getSecret("secretKey").then(res => { setSecret(res); });
    return <>{secret}</>
}

我收到此错误消息:

ERROR in./node_modules/@azure/keyvault-secrets/dist-esm/keyvault-common/src/parseKeyvaultIdentifier.js3:0-27 Module not found: Error: Can't resolve 'url' in'xxx\node_modules@azure\keyvault-secrets\dist-esm\keyvault-common\src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.jscore modules by default. This is no longer the case. Verify if youneed this module and configure a polyfill for it. If you want toinclude 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 }

Answer 1

<Add "lib": ["dom"] to your tsconfig.json, or simply add dom to an existing array in the lib property>, but I'm not using typescript. How do I do this in react?

您可以在 React 项目的根文件夹中找到 tsconfig.json。

如果您没有 tsconfig.json，您可以创建相同的文件并向其添加 "lib":["dom"]。

例如:

{
  "extends": "../../../tsconfig.package",
  "compilerOptions": {
    "declarationDir": "./types",
    "outDir": "./dist-esm",
    "lib": ["dom"],
    "resolveJsonModule": true,
    "paths": {
      "@azure/keyvault-secrets": ["./src/index"]
    }
  },
  "include": [
    "./src/**/*.ts",
    "./test/**/*.ts",
    "../keyvault-common/**/*.ts",
    "samples-dev/**/*.ts"
  ]
}

您可以引用Where can I find tsconfig.json file in my react native project , tsconfig.json和 Cannot find name 'URL'