Webpack 5 compatibility and crypto dependency when importing @azure/msal-node

[nayodahl]

Core Library

MSAL Node (@azure/msal-node)

Core Library Version

2.15.0

Wrapper Library

Not Applicable

Wrapper Library Version

0

Public or Confidential Client?

Confidential

Description

Hello,
I'm trying to build the node exemple provided in an existing Webpack5 config running on node 18.
As soon as I import the class "ConfidentialClientApplication" from @azure/msal-node, I get the following error on build :

"./node_modules/@azure/msal-node/dist/crypto/HashUtils.mjs" contains a reference to the file "crypto".
This file can not be found, please check it for typos or update it if the file got moved.

Reading this closed issue, I tried to add aliases and polyfill to my webpack config.
For exemple, adding this :
config.resolve.fallback = {
crypto: require.resolve('crypto-browserify'),

But once crypto error is fixed, I get a lot of other libs not found anymore, like http, https, process, path etc...

Error Message

"./node_modules/@azure/msal-node/dist/crypto/HashUtils.mjs" contains a reference to the file "crypto".
This file can not be found, please check it for typos or update it if the file got moved.

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

{
  "authenticationMode": "ServicePrincipal",
  "authorityUrl": "https://login.microsoftonline.com/",
  "scopeBase": "https://analysis.windows.net/powerbi/api/.default",
  "powerBiApiUrl": "https://api.powerbi.com/",
  "clientId": "xxxxx",
  "workspaceId": "xxxxx",
  "reportId": "xxxxx",
  "pbiUsername": "",
  "pbiPassword": "",
  "clientSecret": "xxxxx",
  "tenantId": "xxxxx"
}

Relevant Code Snippets

const Encore = require('@symfony/webpack-encore');
const Dotenv = require('dotenv-webpack');
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/en/private/build')
    // only needed for CDN's or sub-directory deploy
    .setManifestKeyPrefix('build')


    .addEntry('main', './assets')
    .addEntry('powerbi', './assets/javascript/powerbi/app.js')
    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
    .autoProvidejQuery()
    .enableReactPreset()

    .addPlugin(new Dotenv({
        systemvars: true

    .addPlugin(new BrowserSyncPlugin(
        {
            host: "localhost",
            port: 8085,
            proxy: 'localhost',
            open: false,
            files: [ // watch on changes
                {
                    match: ['public/build/**/*.js'],
                    fn: function (event, file) {
                        if (event === 'change') {
                            const bs = require('browser-sync').get('bs-webpack-plugin');
                            bs.reload();
                        }
                    }
                }
            ],
            notify: false,
        },
        {
            reload: false,
            name: 'bs-webpack-plugin',
        }
    ))
;

const config = Encore.getWebpackConfig()
config.resolve.fallback = {
    crypto: require.resolve('crypto-browserify'),
};
module.exports = config;

Reproduction Steps

1. npm install @azure/msal-node
2. import { PublicClientApplication} from "@azure/msal-node";
3. error is displayed after npm start

Expected Behavior

should not get an error at build

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome, Firefox

Regression

No response

[tnorling]

These are all node globals which should be provided by the node runtime. Either webpack doesn't make these available or you're compiling for an environment other than node, such as a browser, which is not supported by this package (use msal-browser for browser based apps). If you are compiling a node app then this is a webpack problem and I would suggest you reach out to Webpack for guidance on how to resolve.