Error creating sppkg

[bxlogic]

Hello,

I hope you're doing well. I wanted to ask if there is a way to obtain the sppkg file. I have been trying for a week to package it, but I haven't had any success. The "yarn dev" process is taking hours, even after setting up all the versions. I also attempted to use "npm," but encountered numerous errors. Would it be possible for you to compile the sppkg version and make it available for download? I would greatly appreciate your assistance. Thank you!

[bxlogic]

at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15) at Function.Module._load (node:internal/modules/cjs/loader:873:27) at Module.require (node:internal/modules/cjs/loader:1100:19) at require (node:internal/modules/cjs/helpers:108:18) at Object.<anonymous> (C:\Users\Suad\Desktop\spfx-staff-directory-main\node_modules\resolve\lib\core.js:45:12) at Module._compile (node:internal/modules/cjs/loader:1198:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10) at Module.load (node:internal/modules/cjs/loader:1076:32) at Function.Module._load (node:internal/modules/cjs/loader:911:12) at Module.require (node:internal/modules/cjs/loader:1100:19) { code: 'MODULE_NOT_FOUND', requireStack: [

] } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

one of most errors after giving: yarn dev

[bxlogic]

[09:50:08] Starting server... [09:50:08] Finished subtask 'spfx-serve' after 178 ms [09:50:08] Starting subtask 'pre-copy'... [09:50:08] Finished subtask 'pre-copy' after 61 ms [09:50:08] Starting subtask 'copy-static-assets'... [09:50:08] Starting subtask 'sass'... [09:50:08] Server started https://localhost:4321 [09:50:08] LiveReload started on port 35729 [09:50:08] Running server Opening https://xxx/_layouts/workbench.aspx using the default OS app [09:50:09] Finished subtask 'sass' after 966 ms [09:50:09] Starting subtask 'lint'... [09:50:09] [lint] eslint version: 8.7.0 [09:50:09] Starting subtask 'tsc'... [09:50:09] [tsc] typescript version: 4.5.5 [09:50:10] Finished subtask 'copy-static-assets' after 2.2 s [09:50:15] Finished subtask 'tsc' after 6.36 s [09:50:17] Finished subtask 'lint' after 8.48 s [09:50:17] Starting subtask 'post-copy'... [09:50:17] Finished subtask 'post-copy' after 155 μs [09:50:17] Starting subtask 'configure-webpack'... [09:50:23] Finished subtask 'configure-webpack' after 5.59 s [09:50:23] Starting subtask 'webpack'... Request: '/temp/manifests.js' [09:50:33] Finished subtask 'webpack' after 10 s [09:50:33] Starting subtask 'reload'... [09:50:33] Finished subtask 'reload' after 1.82 ms

this is from 9:50 in the morning, still loading...

[dperk6]

Hi @bxlogic. yarn dev in this repo just runs gulp serve. The message you're seeing means the dev server started successfully. Navigate to your SharePoint tenant workbench with the URL https://{TENANT URL}/_layouts/workbench.aspx. You can point it to a specific site by adding /sites/{sitename}/_layouts/workbench.aspx. You will see those subtasks each time you update the code, with 'reload' being the last to finish. You can also add your tenant URL to /config/serve.json in the "initialUrl" key.

If you want to use npm, no problem. Just delete the yarn.lock file and run npm install. If you've already installed the dependencies you should delete the node_modules folder.

I will also add the sppkg file to the releases.

Let me know if this helps.

[bxlogic]

Hi there,

Thanks for getting back to me, and I appreciate it. However, after packing and installing it, it seems we've run into a new error:

Invalid SharePoint App package. Error: Part URI is not valid per rules defined in the Open Packaging Conventions specification.

If there's any other information you can provide about the installation process or any steps you took before encountering this error, it would be incredibly useful.

Thanks again,

[dperk6]

Did you install mgt-react? https://github.com/microsoftgraph/microsoft-graph-toolkit/releases

[dperk6]

@bxlogic I've updated the code to clean the mgt imports and added the sppkg file to the releases page of this repo. Be sure to install Microsoft's package linked to above.

[bxlogic]

Thank you for your reply! I've tried everything, but it seems I'm still unable to create a proper package to install on my Microsoft 365 tenant.

Could you please update the git repository and add the "sharepoint/solution" as a package? That would be greatly appreciated!

I must say, I love your work and what you have accomplished so far. Thank you very much for all your efforts!

Looking forward to your assistance and updates.

[dperk6]

Thanks for the nice words @bxlogic! I've added the sppkg file here: https://github.com/MRSCompanyLtd/spfx-staff-directory/releases/tag/Production. You can download and install.

If you do want to work with the code eventually, try pulling the latest changes. You may need to delete node_modules and run gulp clean before rebuilding.

[bxlogic]

This is the first error:

` Something went wrong If the problem persists, contact the site administrator and give them the information in Technical Details. TECHNICAL DETAILS ERROR: Cannot read properties of undefined (reading 'id')

CALL STACK: TypeError: Cannot read properties of undefined (reading 'id') at https://res-1.cdn.office.net/files/sp-client/sp-home-assembly_en-us_2682c3062abd06889b0c147b8989633b.js:76:995013 at new Promise () at e.loadComponent (https://res-1.cdn.office.net/files/sp-client/sp-home-assembly_en-us_2682c3062abd06889b0c147b8989633b.js:76:994981) at https://res-1.cdn.office.net/files/sp-client/sp-home-assembly_en-us_2682c3062abd06889b0c147b8989633b.js:76:997018 at async Promise.all (index 0)`

And the second is:

The error that gets returned is The requested permission isn't valid. Reject this request and contact the developer to fix the problem and redeploy the solution, but it does not indicate what is wrong with the permission scope.

Any ideas? :)

[dperk6]

Ok I can reproduce the permission issues, I'll troubleshoot. That said, I can still use the directory in both our production tenant and my developer tenant. Are you in prod? Do you have a Microsoft 365 Developer tenant?

[bxlogic]

I am the head of IT at a company, and my current project involves building an Intranet. I must say, this is the best package I have come across so far, and I have explored many options :)

It includes all the necessary details I need, and I am eager to install it as a web-part to enable people to view information about the rest of the employees. However, I don't believe we own a Developer tenant.

[dperk6]

Silly typo in the permissions request. I re-uploaded a package into the same release. Please re-download the sppkg file and drop it in.

In the API Request page, you can reject the ones that say "Microsoft.Graph" (note the period). It was a typo and should've been "Microsoft Graph" with no period.

I would recommend getting a dev tenant for testing as it will allow you to have a bit more freedom to try things out without cluttering your production tenant. It's free from Microsoft: https://developer.microsoft.com/en-us/microsoft-365/dev-program.

[bxlogic]

Thank you very much for your support @dperk6 works like charm! 👯