question

GalOfer-7756 avatar image
0 Votes"
GalOfer-7756 asked GalOfer-7756 commented

tslint error "Cannot find namespace 'MicrosoftGraph'. ts(2503)" in SPFx web Part

I followed all the instructions
npm install @microsoft/microsoft-graph-client --save
npm install @microsoft/microsoft-graph-types --save-dev


then in code

 import "isomorphic-fetch";
 import { Client } from "@microsoft/microsoft-graph-client";

and

   try {
     const uploadTask: MicrosoftGraph.OneDriveLargeFileUploadTask =
       await MicrosoftGraph.OneDriveLargeFileUploadTask.create(client, file, options);
     const uploadedFile: DriveItem = await uploadTask.upload();
     console.log(JSON.stringify(`Uploaded file with ID: ${uploadedFile.id}`));
     return `Uploaded file with ID: ${uploadedFile.id}`;
   } catch (err) {
     console.log(`Error uploading file: ${JSON.stringify(err)}`);
     return `Error uploading file: ${JSON.stringify(err)}`;
   }


the TSLINT errors:"Cannot find namespace 'MicrosoftGraph'. ts(2503)"

Also, how do I get a Client object from props (MSGraphClientFactory) I get from the Web Part?

Thank you much

office-sharepoint-online
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AmosWu-MSFT avatar image
0 Votes"
AmosWu-MSFT answered AmosWu-MSFT converted comment to answer

Hi @GalOfer-7756 ,
Judging according to the error message, you did not import the MicrosoftGraph module in the code, please try to import the module in the code.

 import * as MicrosoftGraph from "@microsoft/microsoft-graph-types"

If you are developing SPFX, you may have a look at the MSGraphClient.MSGraphClient is a new HTTP client introduced in SharePoint Framework v1.6.0 that simplifies connecting to the Microsoft Graph inside SharePoint Framework solutions.
Use the MSGraphClient to connect to Microsoft Graph


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Getting closer :-) but not there yet.
Now MicrosoftGraph is OK but for MicrosoftGraph.OneDriveLargeFileUploadTask,

TsLint says "Namespace "{mypath}/node_modules/@microsoft/microsoft-graph-types/microsoft-graph"' has no exported member 'OneDriveLargeFileUploadTask' .ts(2694)"

DriveItem changed to MicrosoftGraph.DriveItem and that is OK.

I looked at microsoft-graph.d.ts and there is no mention of "OneDriveLargeFileUploadTask"

Only mention of upload is "MobileAppContentFileUploadState"

So what else am I missing?

it looks so easy in https://docs.microsoft.com/en-us/graph/sdks/large-file-upload?tabs=typescript

BTW I assume OneDriveLargeFileUploadTask is also good for uploading to SharePoint Library. right?


0 Votes 0 ·
GalOfer-7756 avatar image
0 Votes"
GalOfer-7756 answered GalOfer-7756 commented

I figured out that the example code is wrong:



const uploadTask: MicrosoftGraph.OneDriveLargeFileUploadTask = await MicrosoftGraph.OneDriveLargeFileUploadTask.create(client, file, options);

Should be:

import {Client, OneDriveLargeFileUploadTask} from "@microsoft/microsoft-graph-client"
const uploadTask: OneDriveLargeFileUploadTask = await OneDriveLargeFileUploadTask.create(client, file, options);

But I have trouble converting MSGraphClient } from "@microsoft/sp-http" that is provided by SPFx, to Client from "@microsoft/microsoft-graph-client"

Anyone can help?


· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

MSGraphClient and this SDK should not be mutually convertible. This SDK encapsulates the API inside the method and only needs to provide parameters. If you want to use MSGraphClient, you can use this API:Upload large files with an upload session
I have converted your comment to an answer, you could accept it as the answer to help other community members find helpful information quickly.
If you need further help on the following issue, I suggest you open a new question.Thank you:)

0 Votes 0 ·

So how do I instantiate Client (from "@microsoft/microsoft-graph-client") from an SPFx web part?

Using OneDriveLargeFileUploadTask looks much easier to implement than the explanation in https://docs.microsoft.com/en-us/graph/api/driveitem-createuploadsession?view=graph-rest-1.0

0 Votes 0 ·

If want to upload large file into SharePoint library, it's suggested to use PnP Js library and handle the large file in chunk, it's no need to use Graph API, as PnP.Js supported to upload into SharePoint library directly, please check the sample here:

Uploading file with progress indicator in SPFx webpart using PnPJS in SharePoint


0 Votes 0 ·
Show more comments