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