react-application-messagebanner - Will not display after adding to site

[LouFarho]

Sample

react-application-messagebanner

Author(s)

@pmatthews05, @bschlintz

What happened?

After adding the package to my app catalog, I use the provided PowerShell to add it to a site. Nothing happens on the site.
If I run Gulp Serve, then the deployed extension will display along with the one from Gulp Serve.

Steps to reproduce

1. One needs to build the package first. I used the CLI utility to update the solution to the latest framework release.
2. Add package to app catalog
3. Use documented PowerShell to add it to a site. (I tried both options, site and web.
4. Visit home page of site, nothing is displayed.
5. Now run Gulp Serve and two message banners are displayed.

Expected behavior

With the provided PowerShell, the message banner should display on the site as documented in the solution.

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

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

Node.js version

v18.19.0

Additional environment details

SPFx 1.18.2
Yeoman 5.0.0

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[pmatthews05]

Hi @LouFarho,
I've been able to have a look at this today. It has been a while since I have done any spfx work. I started from scratch on a cleanish development tenant.

After using M365 to upgrade the code to the latest SPFX of 1.18.2 and fixed a couple of lint errors, I was able to debug using Gulp Serve. Then after I packaged and built the package. Hopefully my latest PR will be accepted.

I used the PNP PowerShell code to add to my global catalog, then used the other pnp powershell code to add to my site. I took exact script that is in the README.md file. The SharePoint site, required me to do a Ctrl+F5 first time for it to instantly appear for me.

After adding the package to my app catalog, I used the provided PowerShell to add it to a site. Nothing happens on the site.
If I run Gulp Serve, then the deployed extension will display along with the one from Gulp Serve.

From what you have said above, I'm wondering if the page needed a Ctrl+F5. If you have deployed the package in the App Catalog and then run locally, you would see 2 copies on the page. Or what might have happened is that the ClientSideComponentProperties you have deployed (if changed from the default in the readme.md file) has an error in it, and failing to appear on the page, but when you run gulp serve locally, both components on the page picked up the working values from debug settings.

Try looking what values you have by running the following code.

#Connect to your site first....
$(Get-pnpCustomAction -Scope Site  | Where-Object {$_.ClientSideComponentId -eq "1e2688c4-99d8-4897-8871-a9c151ccfc87"}).ClientSideComponentProperties | ConvertFrom-Json

I would think if anything has been read incorrectly, the above line would fail, as it cannot convert it from Json to an object.

Let me know how you get on, and I'll continue to help where I can, but as far as I can see, there is nothing wrong with the example.

[LouFarho]

@pmatthews05
Hi Paul,
Sorry for the delay getting back to you. I had a busy work week.

It appears the problem was I uploaded the package into the app catalog as opposed to using the script.
I removed the package from the catalog. Then used the script to add it. Then added it back into my site using the script. Ran the check command you provided which returned the properties. Went to my home of the targeted site and the banner displayed as expected.

So, this begs the question why uploading into the app catalog doesn't work for this solution?