Esto no funcionaría, ya que está intentando usar una biblioteca de servidor mysql en su front-end. Si bien ambos están escritos en javascript, los entornos en los que trabajan son muy diferentes.
El siguiente diagrama lo explica bastante bien, procedente de este sitio web que te recomiendo que consultes.
En esencia, para la biblioteca de reacción, está utilizando node.js como *.jsx o *.js asistente de compilación, ejecutor de empaquetado, etc. entonces el resultado final debería ser solo un archivo javascript. Algo así como main.123456.js si está utilizando la compilación predeterminada de la aplicación Create React. Ese archivo será significativo en el contexto del navegador, ya que tendrá elementos DOM aquí, cosas específicas de HTML.
Para la biblioteca MySQL, está utilizando node.js como servidor HTTP. Eso no tendrá acceso al DOM, pero debido a que se está ejecutando como un proceso en alguna unidad de cómputo, le brindará diferentes capacidades, lo que permitirá que su conexión MySQL funcione.
office.js opera en el contexto del navegador, básicamente está escribiendo su aplicación con reaccionar y solo haciendo referencia a algunas API de office.js. Eso significa que la línea a continuación pertenece a su aplicación de reacción:
context.document.body.insertParagraph("mysql undefined", Word.InsertLocation.end);
Sin embargo, sus datos de MySQL deben provenir de su servidor. Puede usar node.js como servidor, de esa manera podrá usar la biblioteca MySQL que ha importado de NPM. Este tutorial le muestra cómo configurar un servidor muy simple.
Eso significa esta línea
import { mysql } from 'mysql';
y la conexión sql pertenece al lado del servidor que se ejecuta en el nodo.
