azure-sdk-for-js: Can't resolve node:os / node:process modules in React application

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;
}
  1. Start the project with npm start

Expected behavior React app starts without issue.

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

Screenshot 2024-03-15 at 1 04 47 PM

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.

About this issue

  • Original URL
  • State: closed
  • Created 4 months ago
  • Comments: 21 (7 by maintainers)

Commits related to this issue

Most upvoted comments

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).

@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