Can't resolve node:os / node:process modules in React application

[paulsmithkc]

• Package Name: @azure/core-rest-pipeline, @azure/app-configuration, and @azure/logger
• Package Version:
  • @azure/core-rest-pipeline@1.15.0
  • @azure/app-configuration@1.5.0
  • @azure/logger@1.1.0
• Operating system:
• nodejs
  • version: 18.19.1
• browser
  • name/version: Chrome 122.0.6261.129
• typescript
  • version: 5.4.2
• Is the bug related to documentation in
  • README.md
  • source code documentation
  • SDK API docs on https://docs.microsoft.com

Describe the bug
When trying to start a react app that utilizes @azure/app-configuration we are seeing the following error at startup/build time:

Failed to compile.

./node_modules/@azure/core-rest-pipeline/dist/commonjs/util/userAgentPlatform.js
Module not found: Can't resolve 'node:os' in '/Users/paulsmith/byteui/node_modules/@azure/core-rest-pipeline/dist/commonjs/util'

To Reproduce
Steps to reproduce the behavior:

1. Create a new react app with Create React App
2. Integrate the @azure/app-configuration package to fetch feature flags at runtime, using a connection string.

export async function getFeatureFlag(connectionString: string, name: string): Promise<boolean> {
  const client = new AppConfigurationClient(connectionString);
  const setting = await client.getConfigurationSetting({ key: '.appconfig.featureflag/' + name });
  const enabled = setting.value ? JSON.parse(setting.value)?.enabled : undefined;
  return !!enabled;
}

3. Start the project with npm start

Expected behavior
React app starts without issue.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Build was working up until yesterday, and then it started pulling in the node version of the apis instead of the browser versions.

[github-actions]

Thanks for the feedback! We are routing this to the appropriate team for follow-up. cc @avanigupta @shenmuxiaosen.

[xirzec]

@paulsmithkc can you share some details about the bundler you are using and how you are configuring it?

My guess is that your bundler is not looking at the exports.browser key:

azure-sdk-for-js/sdk/core/core-rest-pipeline/package.json

Line 12 in 1320327

"browser": {

@mpodwysocki @timovv - perhaps we should bring back the top-level browser key to point to ./dist/browser/index.js for better bundler compatibility?

[github-actions]

Hi @paulsmithkc. Thank you for opening this issue and giving us the opportunity to assist. To help our team better understand your issue and the details of your scenario please provide a response to the question asked above or the information requested above. This will help us more accurately address your issue.

[paulsmithkc]

react-scripts@3.4.4 which uses the Webpack 4 bundler.

[xirzec]

@paulsmithkc Thanks for the information.

While we look into our options, you may wish to upgrade to Webpack 5: https://webpack.js.org/blog/2020-10-10-webpack-5-release/

It appears that react-scripts has been on Webpack 5 since their last release 2 years ago: https://www.npmjs.com/package/react-scripts

[paulsmithkc]

Well I have some updates:

1. Upgrading to Webpack 5 isn't practical at this time
2. Both @azure/app-configuration and @azure/storage-blob are producing the same issue, both would need to be patched to fix the bug.
3. Our usage of both is minimal enough to explore calling the REST APIs directly.

[AbdulBasit074]

Same issue for node version: 20.9.0.

[maxim-maluga]

The same issue we've got today. Node 16.
Few days ago all built fine.

Cannot find module: 'node:process'. Make sure this package is installed.
This is we have when building on Agent inside the Azure Pipelines

[maxim-maluga]

Problem could be in @azure/logger@1.1.0
It was updated two days ago.
Forced install of previous "@azure/logger": "1.0.0",
causes during the "Creating an optimized production build...":

./node_modules/@azure/core-auth/dist/commonjs/azureKeyCredential.js 14:6
Module parse failed: Unexpected token (14:6)
File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | */
  | class AzureKeyCredential {

_key;
| /**
| * The value of the key to be used in authentication

[PavlenkoYari]

@xirzec look i think problem in @azure/logger

For me in this file @azure/logger/dist/commonjs/log.js
const process = tslib_1.__importStar(require("node:process"));

My case: i use @azure/storage-blob and this package use logger.
"react-scripts": "3.4.3"
"@azure/storage-blob": "^12.15.0"

.\node_modules\@azure\logger\dist\commonjs\log.js Cannot find module: 'node:process'. Make sure this package is installed.

Can we fix it, and don't change script version?

[junru071120]

Use exact version number:
{
"dependencies": {
"@azure/logger": "1.0.4",
}
}
Don't use range version number:
{
"dependencies": {
"@azure/logger": "^1.0.4",
}
}

[PavlenkoYari]

@junru071120 i don't use @azure/logger this package use @azure/storage-blob

[xirzec]

Same issue for node version: 20.9.0.

Can you provide a repro / additional details for node 20?

[xirzec]

3. Our usage of both is minimal enough to explore calling the REST APIs directly.

@paulsmithkc I'm a bit confused about the scenario of upgrading your dependencies for Azure SDKs, but not any of your other dependencies? Why not simply freeze all of your dependencies with a lockfile? And it's somehow cheaper to hand-write your REST calls than updating to a secure version of node?

[paulsmithkc]

@xirzec We were using both @azure/app-configuration and @azure/storage-blob in only one place each, and in both cases the @azure packages weren't doing much more than wrapping a single HTTP request.

In effect they were bloating up the website which code that ended up being largely unused. As such, it was much more practical & efficient for us to replace them with direct HTTP requests to Azure.

This issue was prevent our whole website from building. So we needed a quick fix, that would allow us to gradually update components. Updating CRA/Webpack requires a lot more regression testing, and updates in other areas that aren't compatible with Webpack 5. (One example being that jsonwebtoken is not compatible with Webpack 5, so we'll need to swap over to jose before we can update the site.)

Related API Docs

• https://learn.microsoft.com/en-us/rest/api/storageservices/put-blob?tabs=microsoft-entra-id
• https://learn.microsoft.com/en-us/azure/azure-app-configuration/rest-api-key-value
• https://learn.microsoft.com/en-us/azure/azure-app-configuration/rest-api-authorization-hmac

[timovv]

Hi all, thanks for your patience as we investigate the issue. We are restoring the browser top-level field to the package.json of the affected packages (see PR) which should allow Webpack 4 to continue working. I will post an update here once this has released (planning on tomorrow).

[timovv]

I've released the patches restoring the browser field. This should resolve the "cannot resolve node:..." issue. Please give it a go!

[gianfelipe93]

Hi @timovv, thanks for helping with this issue.

I have try to build my code and the error has changed to:

ERROR in ./node_modules/@azure/core-rest-pipeline/dist/browser/pipeline.js 10:14
Module parse failed: Unexpected token (10:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| class HttpPipeline {

_policies = [];

| _orderedPolicies;
| constructor(policies) {
@ ./node_modules/@azure/core-rest-pipeline/dist/browser/index.js 3:0-53 3:0-53
@ ./node_modules/@azure/communication-chat/dist-esm/src/credential/communicationTokenCredentialPolicy.js
@ ./node_modules/@azure/communication-chat/dist-esm/src/chatClient.js
@ ./node_modules/@azure/communication-chat/dist-esm/src/index.js

There is a bunch of other errors and they all seem to be coming from "/node_modules/@azure/core-rest-pipeline/dist/browser"

[dhruvateja-sureshTF]

Hi @timovv, thanks for helping with this issue.
But when I try to build my code even after the patch, the error has changed to a different set of errors related to the same module. I'm using node js version 18.12.0.
I've attached the errors.
patchErrors.txt

[timovv]

We have now released a version of Core which is targeting the ES2017 syntax level. This should solve these final compatibility issues with Webpack 4. Please let us know if you encounter any more issues.

[dhruvateja-sureshTF]

Hi @timovv , thanks for fixing this issue.