Estoy tratando de cambiar entre un mapa de folleto y una lista. Funciona bien hasta que el paquete web compila el código. Después de hacer clic en un elemento, el mapa se muestra como debería. Pero cuando cierro el mapa con el botón de cerrar, tengo map.remove() que elimina el mapa pero los conmutadores de clase no alternan, sino que agregan la clase ya existente. La siguiente función se ejecuta para abrir el mapa y alterna correctamente. Y se ejecuta al cerrar el mapa, pero luego los mismos conmutadores no se ejecutan correctamente y agrega la misma clase, como puede ver en la foto a continuación. La clase de menú también está duplicada, lo que no debería suceder. Antes de compilar con webpack, se ejecuta correctamente. ¡Gracias!
const mapHandler = async id => { let brewery; if (id) { brewery = await fetchBreweries.get('/' + id); if (!brewery.latitude || !brewery.longitude) { alert('Sorry, this entry has no coordinates.'); return; }; }; if (!id) { //no id means we are clicking the closehandler, so enable buttons in footer and remove the map footerBtns.map(btn => btn.disabled = false); //remove it before toggling classes or it will throw the can't find it error if (map) map.remove(); }; mapEl.classList.toggle('not-visible'); list.classList.toggle('not-visible'); mapEl.classList.toggle('visible'); list.classList.toggle('visible'); if (!id) return; //there is an id, so we are going to build the map to show it //disable buttons in the footer so we cannot click on them when the map is shown footerBtns.map(btn => btn.disabled = true); if (aroundMyLocation) { //if above flag is true than we want to build the map, show own location and then fly to brewery location buildMap(myLocation); setTimeout(() => { map.flyTo([brewery.latitude, brewery.longitude], 12, {duration: 3}) }, 800); setTimeout(() => { L.marker([brewery.latitude, brewery.longitude]) .addTo(map) .bindPopup(brewery.name) .openPopup(); }, 1200); } else { //flag is false so we only want to show the brewery location buildMap({lat: brewery.latitude, lng: brewery.longitude}); L.marker([brewery.latitude, brewery.longitude]) .addTo(map) .bindPopup(brewery.name) .openPopup(); }; //show brewery details in bottom right box details.innerHTML = ` <h3>${brewery.name}</h3> <p>${brewery.phone || 'number unknown'}</p> <p>${brewery.street || 'street unknown'}</p> <p>${brewery.city || 'city unknown'}</p> `;
};
Mi script se estaba agregando dos veces con webpack. Después de agregar inject: false
a HtmlWebpackPlugin en mi archivo de configuración, se estaba ejecutando como debería. Estaba tratando de hacer un proyecto simple para poder concentrarme en aprender webpack, serviceworkers y testing. Un poco demasiado todo a la vez probablemente...