[BUG] I cannot import the providers or anything else from the module

[xatil]

Describe the bug I have installed the toolkit via npm, but when I try to import it with "import { Providers, Msal2Provider } from "@microsoft/mgt";" (which I got from you documentation) I get the following error: import { Providers, Msal2Provider } from "@microsoft/mgt"; ^^^^^^^^^^^^^ SyntaxError: Named export 'Msal2Provider' not found. The requested module '@microsoft/mgt' is a CommonJS module, which may not support all module.exports as named exports.

I was using CommonJs before, but it told me that it cannot import from ES6, so I changed my whole project to ES6 only to get the message above.

To Reproduce Unfortunately, I do not have a Github project to reproduce this bug.

Expected behavior It should import the modules.

Environment (please complete the following information):

• Framework: NodeJs with Express
• Version: 18.17.1

[sebastienlevert]

Can you share a small repro we could have a look at? Are you trying to use MGT for server-side components? Thanks, this will be very useful for our team to look at it! Thanks!

[gavinbarron]

@xatil I'm not sure where you found any guidance suggesting importing Msal2Provider from @microsoft/mgt, so if you could let us know where you found that it would be useful to help us correct any incorrect documentation.

That import should be:

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

In general if you're using a modern build toolchain I'd avoid using the mgt package as it's just aggregating and re-exporting a number of underlying packages.

[xatil]

@gavinbarron I found it in this documentation: https://learn.microsoft.com/en-us/graph/toolkit/providers/providers

If I import it the way you suggested, I get the same error: `import { Msal2Provider } from "@microsoft/mgt-msal2-provider"; ^^^^^^^^^^^^^ SyntaxError: Named export 'Msal2Provider' not found. The requested module '@micr osoft/mgt-msal2-provider' is a CommonJS module, which may not support all module .exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from '@microsoft/mgt-msal2-provider'; const { Msal2Provider } = pkg;`

I also tried the method above with 'pkg', but then I get this: (node:71834) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. (Usenode --trace-warnings ...` to show where the warning was created) /var/www/node-kautex-dev-leart/node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js:7 export * from './Msal2Provider'; ^^^^^^

SyntaxError: Unexpected token 'export'`

It does not make any sense, because I am using ES6 and "type" is set to "module". The .mjs extension did not work either. I can import every other module but I cannot import the mgt modules.

[xatil]

@sebastienlevert

The main issue I am facing is, that i want to use Microsoft Graph in back-end and the toolkit in front-end. In my login method I make a Graph request to get some user information. When I use the CDN for the toolkit, I need to use the MGT sign in button, which tries to sign me in wit my function, but then the Graph request fails, because both are requesting an access code. I know that I can use Graph with MSAL2Provider, but since I need it in back-end and it will not import it, it does not work for me.

[gavinbarron]

First off, Microsoft Graph Toolkit is a browser-based tool. It's built on top of web components, we have not tested the use of our providers in server-side code. Give that the Msal2Providers is intended for use in browser-based applications for delegated auth it's highly unlikely to be what you want for making requests on the server.

Now, that said, if you're looking to have a browser-based application that routes end user requests to Microsoft Graph via a server-side proxy then you might want to look at the using this in a proxy provider scenario. Checkout the samples here: https://github.com/pnp/mgt-samples/tree/main/samples/app

Regarding the errors that you're encountering, without a reproduction to look at I can't offer much guidance beside the fact that it appears that somehow your environment is not correctly loading the es6 code that is distributed in out packages. We do ship both CommonJS and ESM in @microsoft/mgt (and we do also include the @microsoft/mgt-msal2-provider in that package).

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.