Office-js Commands.js function Not executing

Question

I have a simple function that when clicking it on a button it changes the font color. For some reason these are the only functions not working / registering. This is the commands.ts file under the commands folder directly under src.

The button is in the manifest.xml file that is under its own group and I have verified that they match. That is what the event.source.id is.

async function changeColor(event) {
  Word.run(async (context) => {
      await context.sync();
      const selectedText = context.document.getSelection();
      selectedText.load();
      await context.sync();
      switch (event.source.id) {
          case "Blue.Button":
              selectedText.font.color = "#08437A";
              await context.sync();
              break;
          case "Orange.Button":
              selectedText.font.color = "#EA7C1D";
              await context.sync();
              break;
          case "Green.Button":
              selectedText.font.color = "#8EAB4D";
              await context.sync();
              break;
          case "Purple.Button":
              selectedText.font.color = "#1B1630";
              await context.sync();
              break;
          case "Yellow.Button":
              selectedText.font.color = "#FFCF01";
              await context.sync();
              break;
          default:
              selectedText.font.color = "#CCCCCC";
              await context.sync();
              break;
      }

      await context.sync();

  });

  event.completed();
}

function getGlobal() {
  return typeof self !== "undefined"
    ? self
    : typeof window !== "undefined"
    ? window
    : typeof global !== "undefined"
    ? global
    : undefined;
}


const g = getGlobal();

Office.actions.associate("changeColor", changeColor);

I am in a Typescript React project but I have tried changing the file to.js and.ts even though it should work either way to eliminate any bugs. I have looked at the docs and I notice that the Office.actions.associate is new and that is the new way to call the function. Any recommendations?

Answer 1

I found the solution, it was in my webpack.config.js file

before:

new HtmlWebpackPlugin({
    filename: "taskpane.html",
    template: "./src/taskpane/taskpane.html",
    chunks: ["taskpane", "vendor", "polyfills"],
  })

after:

new HtmlWebpackPlugin({
    filename: "taskpane.html",
    template: "./src/taskpane/taskpane.html",
    chunks: ["taskpane", "vendor", "polyfills", "commands"],
  })

Turns out I missed putting the "commands" within the taskpane since that is where it was residing.