¡Los novatos de ReactJS y NextJS apreciarían cualquier consejo sobre el siguiente problema! ¡Gracias!

La pila:

• Nodo v16.6.1
• reaccionar v17.0.2
• Siguiente.js v10.0.4

Estoy implementando un carrusel y, dado que el carrusel necesitará javascript del lado del cliente, estoy usando next/dynamic para implementar un componente dinámico sin SSR. Esto funciona bien, pero cuando agrego un detector de eventos javascript al módulo dinámico, el módulo deja de procesarse.

La depuración siguiente en Chrome DevTools no muestra errores ni advertencias al compilar la página. No pude encontrar una referencia a ninguna información de compilación adicional disponible en la documentación de Next.

Módulo principal:

 import react from 'react'; import dynamic from 'next/dynamic' const DynamicComponentWithNoSSR = dynamic( () => import('../components/shared/dynamicTestComponent'), { ssr: false } ) const TestEmbedDynamicComponent: React.FC = () => { return ( <div> <div>this is text above dynamic component</div> <DynamicComponentWithNoSSR/> <div>this is text below dynamic component</div> </div> )} export default TestEmbedDynamicComponent

Módulo dinámico:

 const selectedButton = document.querySelector(".selectMe"); //selectedButton.addEventListener("click", e => {alert("dynamic module loaded!");}); const DynamicTestComponent: React.FC = () => { return ( <div className="">lorem ipsum <button className="selectMe">clickMe!</button> </div> )} export default DynamicTestComponent

Resultado:

Y si elimino el comentario de la línea donde se agrega el oyente: