Tengo el siguiente archivo de componentes para un botón de calendario:

 import { html } from '../../../web_modules/htm/react.js'; export default ({ buttons }) => { return buttons.map(val => { let outDateclassName = false; let isSelected = ''; if (val.flag !== 'currentMonth') { outDateclassName = 'outside-month'; } if (val.isSelected) { isSelected = 'day-selected'; } return html` <button className='button button--28 datepicker__day ${outDateclassName} ${isSelected} ${val.circleStart} ${val.circleEnd}' type='button' aria-label='${val.value}' aria-selected='false' disabled='${val.dateDisabled}' tabIndex='-1' > <span className='button__children'>${val.value}</span> </button> `; }); };

Cuando agrego dispatch a la página como se muestra a continuación:

 import { html } from '../../../web_modules/htm/react.js'; import { DispatchContext } from '../../../../context/index.js'; import { useContext } from '../../../../../web_modules/react.js'; export default ({ buttons }) => { const dispatch = useContext(DispatchContext); return buttons.map(val => { let outDateclassName = false; let isSelected = ''; if (val.flag !== 'currentMonth') { outDateclassName = 'outside-month'; } if (val.isSelected) { isSelected = 'day-selected'; } // isSelected = val.value; return html` <button className='button button--28 datepicker__day ${outDateclassName} ${isSelected} ${val.circleStart} ${val.circleEnd}' type='button' aria-label='${val.value}' aria-selected='false' disabled='${val.dateDisabled}' tabIndex='-1' onClick=${() => { dispatch({ type: 'TIMEINTERVAL', dateRange: [1, 10, 14] }); }} > <span className='button__children'>${val.value}</span> </button> `; }); };

Recibo el siguiente error con el código anterior:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

¿Cómo usar Dispatch en este caso?