Cant't Resolve URL Azure Keyvault in React - reactjs

Question

I am working on adding a secret key to my react app. When I import the dependencies I get this error
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'
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 }

Answer 1

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'
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 5 is the main source of the issue. It doesn't preload the Node.js polyfill.
To resolve this issue, try install npm install url, and add it into webpack.config.js:
module.exports = {
// ...
resolve: {
fallback: {
url: require.resolve("url/")
}
}
// ...
};
For reference : Resolve | webpack
Alternatively, Try to remove complete dependency tree and rebuild it using npm and react-scripts in a package. At least until I find a suitable solution, everything runs smoothly with json version 4.0.3.
And u can also fix this issue through
npm audit fix --force
For reference :
reactjs - Can't resolve 'url' in node_modules error when trying to access Azure Key Vault with React