authProviderOptions folder seems to be missing and causing compilation warning

[hesperanca]

Bug Report

Prerequisites

• [X ] Can you reproduce the problem?
• [ X] Are you running the latest version?
• [ X] Are you reporting to the correct repository?
• [ X] Did you perform a cursory search?

For more information, see the CONTRIBUTING guide.

Description

I'm getting the following compilation warning:

WARNING in ./node_modules/@microsoft/microsoft-graph-client/authProviders/authCodeMsalBrowser/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Projects\Obedis\src\Frontend\Obedis.Cockpit\node_modules@microsoft\microsoft-graph-client\authProviderOptions\authCodeMsalBrowser\index.ts' file: ErrCompiled with warnings.

I've checked under the node modules folder in the file system and the "authProviderOptions" folder does not exist.
I've re-installed the component but still getting the same error.

Many thanks in advanced

[sebastienlevert]

Can you share a super small repro so we can have a look at it? I wasn't able to reproduce. Thanks!

[yiqing-zhao]

Same issue here, in my case, I was trying to use @microsoft/microsoft-graph-client in a react app. @sebastienlevert, here are the repro steps:

1. Run npx create-react-app my-app --template typescript and cd my-app.
2. Run npm install @microsoft/microsoft-graph-client @azure/[email protected]. In my case, I installed @microsoft/[email protected] and @azure/[email protected]
3. In file App.tsx, update the code as follows:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { InteractiveBrowserCredential } from "@azure/identity";
import { Client } from "@microsoft/microsoft-graph-client";
import { TokenCredentialAuthenticationProvider } from "@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials";

function App() {
  const credential = new InteractiveBrowserCredential({
    clientId: "YOUR_CLIENT_ID",
    tenantId: "YOUR_TENANT_ID",
  });
  const authProvider = new TokenCredentialAuthenticationProvider(credential, {
    scopes: ["User.Read"],
  });
  const client = Client.initWithMiddleware({ authProvider });
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

4. Run npm run start. Then, the warning appears. Please ignore the warning of no-unused-vars.
   

[sebastienlevert]

Thanks @yiqing-zhao for the repro, I was able to get this reproduced. It seems to be an ESM issue that doesn't appear in CJS. @koros please have a look as this is really impacting developers right now. Thanks.

[hesperanca]

Thanks @yiqing-zhao. You beat me to it. Things are mad here and I haven't had a chance to create a repro for @sebastienlevert. One less thing on my task list 😊

[koros]

@yiqing-zhao I am currently looking into this. I'll give an update soon

[sgauthier25]

Hello everyone,

Do you have a date when a fix will be provided?

[koros]

Hello everyone,

Do you have a date when a fix will be provided?

It should be addressed in ver 3.0.6