New command set extension doens't show up in the bar or console log

[JonEOffice]

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
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version 1.20.0
• Node.js version 18.20.6
• "@microsoft/decorators": "1.20.0",
  "@microsoft/sp-core-library": "1.20.0",
  "@microsoft/sp-dialog": "1.20.0",
  "@microsoft/sp-listview-extensibility": "1.20.0",
• "@microsoft/eslint-config-spfx": "1.20.2",
  "@microsoft/eslint-plugin-spfx": "1.20.2",
  "@microsoft/rush-stack-compiler-4.7": "0.1.0",
  "@microsoft/sp-build-web": "1.20.2",
  "@microsoft/sp-module-interfaces": "1.20.2",
  "@rushstack/eslint-config": "4.0.1",
  "@types/webpack-env": "~1.15.2",
  "ajv": "^8.17.1",
  "eslint": "8.57.0",
  "gulp": "4.0.2",
  "typescript": "4.7.4"

Describe the bug / error

I build a default command set view extension using yo @microsoft/sharepoint. after it is finished I run gulp serve -nobrowser.
Copy the URL to a doc lib and append ?debug=true&noredir=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests%2Ejs
nothing

Copy the URL to a list and append ?debug=true&noredir=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests%2Ejs
nothing

change RegistrationId to 101 under elements.xml. Close down gulp serve and rerun it. Do the same again on both locations nothing.
the only thing that pops up is this:

I have this in the code:

  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, 'Initialized TestCommandSet');
    console.log('Initialized TestCommandSet');

but this message does not appear in the console log

Is there something I'm missing here?

Steps to reproduce

1. yo @microsoft/sharepoint
2. Create command set list extension
3. npm install ajv@latest --save-dev (see my other bug report Error: Cannot find module 'ajv/dist/core' #10105)
4. gulp serve
5. Append URL to list or doc lib

Expected behavior

To see the command buttons

[Ashlesha-MSFT]

Hello @JonEOffice,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@JonEOffice,
Could you please confirm if you have followed the steps outlined in the documentation link https://learn.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api to create command set extension?

[JonEOffice]

@Ashlesha-MSFT Not entirly since the ./config/serve.json section breaks stuff. But I have provide the steps I took to get to this point in the steps to reproduce. Did you try the steps? Here is the .ts file. All default

import { Log } from '@microsoft/sp-core-library';
import {
  BaseListViewCommandSet,
  type Command,
  type IListViewCommandSetExecuteEventParameters,
  type ListViewStateChangedEventArgs
} from '@microsoft/sp-listview-extensibility';
import { Dialog } from '@microsoft/sp-dialog';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface ITestCommandSetProperties {
  // This is an example; replace with your own properties
  sampleTextOne: string;
  sampleTextTwo: string;
}

const LOG_SOURCE: string = 'TestCommandSet';

export default class TestCommandSet extends BaseListViewCommandSet<ITestCommandSetProperties> {

  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, 'Initialized TestCommandSet');
    console.log('Initialized TestCommandSet');

    // initial state of the command's visibility
    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    compareOneCommand.visible = false;

    this.context.listView.listViewStateChangedEvent.add(this, this._onListViewStateChanged);

    return Promise.resolve();
  }

  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
    switch (event.itemId) {
      case 'COMMAND_1':
        Dialog.alert(`${this.properties.sampleTextOne}`).catch(() => {
          /* handle error */
        });
        break;
      case 'COMMAND_2':
        Dialog.alert(`${this.properties.sampleTextTwo}`).catch(() => {
          /* handle error */
        });
        break;
      default:
        throw new Error('Unknown command');
    }
  }

  private _onListViewStateChanged = (args: ListViewStateChangedEventArgs): void => {
    Log.info(LOG_SOURCE, 'List view state changed');

    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
    if (compareOneCommand) {
      // This command should be hidden unless exactly one row is selected.
      compareOneCommand.visible = this.context.listView.selectedRows?.length === 1;
    }

    // TODO: Add your logic here

    // You should call this.raiseOnChage() to update the command bar
    this.raiseOnChange();
  }
}

[Ashlesha-MSFT]

@JonEOffice ,
I have noticed a difference in the working code compared to the non-working version. The key difference is the return type being void in the working code:

Additionally, please ensure that you select at least one row in the list before testing the command set. The command set view will only appear when a row is selected, according to your code logic.

[JonEOffice]

@Ashlesha-MSFT that is a copy paste problem, it was already in there

And I know I have to select an item, as you can see in the code I have put in a console.log in there. This also doesn't trigger

[JonEOffice]

@Ashlesha-MSFT #10101 Might this be the same problem?

[ryanexner]

I was getting the same error the other day. The command bar button would only show up on first page load, but disappear with subsequent page refreshes.

What fixed it for me was to set Offline and sync to No: List Settings > Advanced Settings > "Allow people to sync this list to their computers with Microsoft Lists and access it in the browser without an internet connection?" = No.

@JonEOffice , I'm having the same issue with report in #10101 where the SPFx Filed Customizer isn't calling the onInit(). Disabling syncing hasn't solved the issue for me with that one.

[Ashlesha-MSFT]

@JonEOffice,
#10101 is regarding form customizer and not command set extension.
And where do you want to render the extension at command bar or in context menu?

[JonEOffice]

@JonEOffice, #10101 is regarding form customizer and not command set extension. And where do you want to render the extension at command bar or in context menu?

As the the default it was set on the CommandBar. I have changed it to both the locations, but no difference

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="Test"
        RegistrationId="101"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet"
        ClientSideComponentId="ec07e44f-999a-4895-a85e-b106085ca4b0"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
</Elements>

[JonEOffice]

@Ashlesha-MSFT The warning that I receive

A preload for 'https://localhost:4321/dist/test-command-set.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

goes to the following:

[Ashlesha-MSFT]

@JonEOffice,
I set the below configuration
Location="ClientSideExtension.ListViewCommandSet"
For me command bar worked and context menu is having issue, for which we will raise bug to engineering team.

For the warning that you receive could you please follow below issue
https://sharepoint.stackexchange.com/questions/313993/spfx-commandbar-buttons-and-context-menu-are-not-working-with-microsoft-list-loo

[JonEOffice]

@JonEOffice, I set the below configuration Location="ClientSideExtension.ListViewCommandSet" For me command bar worked and context menu is having issue, for which we will raise bug to engineering team.

For the warning that you receive could you please follow below issue https://sharepoint.stackexchange.com/questions/313993/spfx-commandbar-buttons-and-context-menu-are-not-working-with-microsoft-list-loo

I tried that solution of disabling the offline mode, but it still doesn't work. Besides that I want to get the button to work on a document library, not a list.
that's why my RegistrationId="101"

[Ashlesha-MSFT]

@JonEOffice, since i am not able to repro the issue, I have done some workaround
Have you tried with below solutions

1. Add the crossorigin attribute in your SPFx solution
   Modify the write-manifests.json in your SPFx project to include:
   config/write-manifests.json
   {
   "cdnBasePath": "https://localhost:4321/dist/",
   "crossOrigin": "use-credentials"
   }
   2.Ensure your serve.json allows credentials
2. Explicitly add crossorigin="use-credentials" when preloading scripts

[JonEOffice]

@Ashlesha-MSFT Thank you for your help so far. But I can't get this to work.
Do you happen to have 1.20 helloworld working example of a command set I can compare my version with?

[Ashlesha-MSFT]

@JonEOffice,
Here’s a working example of a SPFx Command Set (Hello World) for version 1.20 that you can compare with your implementation: https://github.com/Ashlesha-MSFT/Newsharepoint/tree/main/sharepoint4

[JonEOffice]

@Ashlesha-MSFT Thank you! So with your version I don't get the ajv error, so I could run it with "ajv": "^6.12.5". Which is different from mine "ajv": "^8.17.1",

But I still don't see the commands on the commandbar. Not with edge or chrome. Changed the registrationID to 101. Changed the offline mode to off. Still don't see the commands, still see the warning in the console.

Might this be related to whatever is installed on my machine?

[Ashlesha-MSFT]

@JonEOffice,
Thanks for your patience and for testing the suggestions. Since I am still unable to reproduce the issue on my end, let's try to further isolate potential causes:

It might be related to something specific in your local development environment.
Could you try running the same project on a different machine or in a clean virtual environment (e.g., a fresh Windows VM with only Node.js and SPFx installed)?
If possible, could you also try running it in an inPrivate/Incognito window or a different browser profile to rule out cache issues?

[JonEOffice]

@Ashlesha-MSFT I found the cause of my problems, I was always doing gulp serve --nobrowser and copying the URL at the end of the string:
?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

in the tests I tried gulp serve and copy this below URL behind the library and that loads the actions in.
?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true&customActions=%7B%22ec07e44f-999a-4895-a85e-b106085ca4b0%22%3A%7B%22location%22%3A%22ClientSideExtension.ListViewCommandSet%22%2C%22properties%22%3A%7B%22sampleTextOne%22%3A%22One+item+is+selected+in+the+list%22%2C%22sampleTextTwo%22%3A%22This+command+is+always+visible.%22%7D%7D%7D

I did try to gulp build, bundle and package it and that also didn't load the buttons, so I don't know if this fixes all my issues, but I now see the commands using the workbench

[JonEOffice]

@Ashlesha-MSFT So I now get the commands to show up on my workbench, but when I build the solution it still doens't show up. How to fix this?
I run gulp build --ship, gulp bundle --ship, gulp package-solution --ship

I tried on my other machine and there everything is different, no issue with deploying nor issue with the ajv. Works there. So it is this machine that is having issues. what can it be, I use nvm on both machines. Can it be something like pnp powershell that is installed?

[JonEOffice]

@Ashlesha-MSFT I still don't get it, I build your solution and I don't get the ajv error and I build mine and I get it with mine. The package.json are the same
I have uploaded my default solution at my repository https://github.com/JonEOffice/Test

After building I see that my solution has more folders then yours in the node_modules folder. How is this build if is not based upon the package.json?

@ctrl
ajv-draft-04
css-declaration-sorter
cssnano
cssnano-preset-default
cssnano-utils
dom-helpers
postcss-calc
postcss-colormin
postcss-convert-values
postcss-discard-comments
postcss-discard-duplicates
postcss-discard-empty
postcss-discard-overridden
postcss-merge-longhand
postcss-merge-rules
postcss-minify-font-values
postcss-minify-gradients
postcss-minify-params
postcss-minify-selectors
postcss-normalize-charset
postcss-normalize-display-values
postcss-normalize-positions
postcss-normalize-repeat-style
postcss-normalize-string
postcss-normalize-timing-functions
postcss-normalize-unicode
postcss-normalize-url
postcss-normalize-whitespace
postcss-ordered-values
postcss-reduce-initial
postcss-reduce-transforms
postcss-svgo
postcss-unique-selectors
react
react-dom
react-transition-group
scheduler
stylehacks

[Ashlesha-MSFT]

@JonEOffice,

Its because of older package-lock.json
Can you please delete Node_Modules and package-lock.json
And Re-run npm install, I able to get command bar extension using your repo code.