Estoy usando @googlemaps/js-api-loader en mi sitio web de Nuxt 3. Todo funciona bien en el desarrollo local, pero cuando trato de construir el proyecto con nuxt generate (no importa si es local o en Vercel) obtengo el siguiente error:
[nuxt] [request error] Named export 'Loader' not found. The requested module 'file:///path/to/website/node_modules/@googlemaps/js-api-loader/dist/index.umd.js' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:La parte importante de cargar el script se ve así:
import { Loader } from '@googlemaps/js-api-loader'; const loader = new Loader({ apiKey: config.googleMapsApiKey, version: 'weekly', }); onMounted(async() => { await loader .load() ...así que traté de importar este paquete de manera diferente, por ejemplo:
import * as gmaps from '@googlemaps/js-api-loader'; const { Loader } = gmaps;y el error anterior desapareció, pero ahora me sale
[Vue warn]: Unhandled error during execution of setup function at <DynamicLocations class="contact__map" locations= [ { id: 1, ... [nuxt] [request error] gmaps.Loader is not a constructor at setup (./.nuxt/prerender/chunks/app/server.mjs:5536:20) at _sfc_main$t.setup (./.nuxt/prerender/chunks/app/server.mjs:5582:25) at callWithErrorHandling (./.nuxt/prerender/chunks/renderer.mjs:2654:23) at setupStatefulComponent (./.nuxt/prerender/chunks/renderer.mjs:9548:30) at setupComponent (./.nuxt/prerender/chunks/renderer.mjs:9503:12) at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12068:17) at Object.ssrRenderComponent (./.nuxt/prerender/chunks/renderer.mjs:12504:12) at ./.nuxt/prerender/chunks/app/server.mjs:5628:36 at renderComponentSubTree (./.nuxt/prerender/chunks/renderer.mjs:12149:13) at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12084:16)Tampoco puedo importar el paquete por exportación predeterminada. ¿Tienes alguna idea de lo que está pasando y cómo puedo solucionarlo?
Encontré una página de documentación relacionada con este problema y hay la siguiente información:
Si encuentra estos errores, es casi seguro que el problema esté relacionado con la biblioteca ascendente. Necesitan arreglar su biblioteca para admitir la importación por parte de Node.
Aunque brindan una solución para deshacerse de los errores al agregar el paquete a build.transpile :
build: { transpile: ['@googlemaps/js-api-loader'], },funcionó para mí