Office-js Commands.js function Not executing - ms-word

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.