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

[AnthonyF]

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.

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

 

Core Library

MSAL Node (@azure/msal-node)

Core Library Version

2.15.0

Public or Confidential Client?

Confidential

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

issue submitted also here 

[AnthonyF]

Thanks for the help, it really helped me.
A little more detail on the polyfill package I used, https://github.com/Richienb/node-polyfill-webpack-plugin 

"Process" has to be specified in the config of this package, that was the tricky part

[Anonymous · Accepted solution]

Hi, @AnthonyF 

Firstly, as Webpack 5 no longer includes polyfills for Node.js core modules by default, you will need to add them explicitly. You've already begun addressing the crypto module, but you'll also need to add polyfills for other modules.Below are screenshots from the relevant documentation:

For further details, please refer to:

Resolve | webpack

Secondly, ensure that you have installed the necessary polyfill packages.

Here are some reference examples:

npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

How to polyfill node core modules in webpack 5

Next, make sure your Webpack configuration is correctly set up to handle .mjs files:

Loaders | webpack

Finally, here are some related documents I found that I hope will be helpful to you:

webpack 5 & next.js 10 - how to add resolve fallback to config - DEV Community

 next.config.js Options: webpack | Next.js

Of course, if you have any new discoveries or questions, please feel free to get in touch with us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.