SharePoint / sp-dev-docs

SharePoint & Viva Connections Developer Documentation
https://docs.microsoft.com/en-us/sharepoint/dev/
Creative Commons Attribution 4.0 International
1.24k stars 1.01k forks source link

App Hub Application Stopped Working, it was deployed to Teams in February 2024 when it worked flawlessly untill July 2024 #9843

Closed BrucedeMink closed 1 month ago

BrucedeMink commented 1 month ago

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

Additional environment details

VS Code,

Describe the bug / error

The app rendered the SharePoint list with the use of TypeScript/JavaScript/jQuery, into a graphical representation of the list of linkages logged in the SharePoint List.

image

This was working perfectly until the first week of July and since then it has stopped rendering the links and looks like this.

image

Sorry, something went wrong Can't load the application on this page. Use the browser Back button to retry. If the problem persists, contact the administrator of the site and give them the information in Technical Details. TECHNICAL DETAILS Error details: Error: Error initializing application. Error: TypeError: Cannot read properties of undefined (reading 'componentType') Troubleshoot issues with Microsoft SharePoint Foundation. Correlation ID: 564d43a1-c08c-9000-a2f1-704aad0a5276 Date and Time: 8/5/2024 6:09:19 AM The warning indicates that there is an issue connecting to the SharePoint resource. I have opened the web version of Teams to investigate further, in the developer's tools I found the following. Errors:

image

Warnings:

image

Information:

image

There are authorized connections using tokens being displayed. Which makes me question the connections being made to the SharePoint site to retrieve the data. There are 3 errors from Precompiled-web-work…js, flowed by a 403 error which is a connection to graph.microsoft.com which I assume is a denial of connection to the SharePoint API, which I use in the TypeScript code:

image

The next error Refused to compile or instantiate Web Assembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-R+g9VdMVCZC/eeynejoLZg==' 'report-sample' 'self' https://statics.teams.cdn.office.net/ Details a Policy instructing the denial of connection followed by 4 SharePoint JSON [Object Object] validation error because the code is returning a blank key: value pair array.

Assuming that a further “handshake” was required (either an access token or initiation using SSO) I tried to re-authenticate and tokenize the SharePoint connection request, this failed due to a CORS violation and late finding out that it was not required and a simple spHttpClient request would suffice to facilitate the REST API. However other people are having a 403 connection error to SharePoint Lists

Steps to reproduce

The Production App 1) Click on Icon 2) page would have loaded 3) Error loads

The Dev 1) Click On Environment local. 2) Same error page loads.

if you open Terminal and run gulp serve the images in the application load

Expected behavior

The App is meant to look like this: image

BrucedeMink commented 1 month ago

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

  • [ ] 💥 Internet Explorer
  • [x] 💥 Microsoft Edge
  • [x] 💥 Google Chrome
  • [x] 💥 FireFox
  • [ ] 💥 Safari
  • [ ] mobile (iOS/iPadOS)
  • [ ] mobile (Android)
  • [ ] not applicable
  • [ ] other (enter in the "Additional environment details" area below)

Additional environment details

VS Code,

  • Node : 16.20.2
  • NVM : 1.1.12
  • Build tools version: 3.18.1 SPFx, Teams Toolkit,
  • Project app-hub version:0.0.2 SharePoint Online

Describe the bug / error

The app rendered the SharePoint list with the use of TypeScript/JavaScript/jQuery, into a graphical representation of the list of linkages logged in the SharePoint List.

image

This was working perfectly until the first week of July and since then it has stopped rendering the links and looks like this.

image

Sorry, something went wrong Can't load the application on this page. Use the browser Back button to retry. If the problem persists, contact the administrator of the site and give them the information in Technical Details. TECHNICAL DETAILS Error details: Error: Error initializing application. Error: TypeError: Cannot read properties of undefined (reading 'componentType') Troubleshoot issues with Microsoft SharePoint Foundation. Correlation ID: 564d43a1-c08c-9000-a2f1-704aad0a5276 Date and Time: 8/5/2024 6:09:19 AM The warning indicates that there is an issue connecting to the SharePoint resource. I have opened the web version of Teams to investigate further, in the developer's tools I found the following. Errors:

image

Warnings:

image

Information:

image

There are authorized connections using tokens being displayed. Which makes me question the connections being made to the SharePoint site to retrieve the data. There are 3 errors from Precompiled-web-work…js, flowed by a 403 error which is a connection to graph.microsoft.com which I assume is a denial of connection to the SharePoint API, which I use in the TypeScript code:

image

The next error Refused to compile or instantiate Web Assembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'nonce-R+g9VdMVCZC/eeynejoLZg==' 'report-sample' 'self' https://statics.teams.cdn.office.net/ Details a Policy instructing the denial of connection followed by 4 SharePoint JSON [Object Object] validation error because the code is returning a blank key: value pair array.

Assuming that a further “handshake” was required (either an access token or initiation using SSO) I tried to re-authenticate and tokenize the SharePoint connection request, this failed due to a CORS violation and late finding out that it was not required and a simple spHttpClient request would suffice to facilitate the REST API. However other people are having a 403 connection error to SharePoint Lists

Steps to reproduce

The Production App

  1. Click on Icon
  2. page would have loaded
  3. Error loads

The Dev

  1. Click On Environment local.
  2. Same error page loads.

if you open Terminal and run gulp serve the images in the application load

Expected behavior

The App is meant to look like this: image

VesaJuvonen commented 1 month ago

Issue has been resolved. Seems that the issue was caused by SPFx package which was not activated at the tenant level for the Teams experience to pick it up.