无法使用 @googlemaps/js-api-loader 生成 Nuxt 网站

Question

I am using @googlemaps/js-api-loader in my Nuxt 3 website. Everything works fine in local development, but when I try to build the project with nuxt generate (no matter if locally or on Vercel) I'm getting following 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:

The important part of loading script looks like this:

import { Loader } from '@googlemaps/js-api-loader';

const loader = new Loader({
    apiKey: config.googleMapsApiKey,
    version: 'weekly',
});

onMounted(async() => {
    await loader
        .load()

        ...

so I tried to import this package differently, eg:

import * as gmaps from '@googlemaps/js-api-loader';
const { Loader } = gmaps;

and the previous error disappeared, but now I'm getting

[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)

I also can't import package by default export. Do you have any ideas what's going on and how can I fix this?

Answer 1

I found a documentation page related to this problem and there is the following information:

If you encounter these errors, the issue is almost certainly with the upstream library. They need to fix their library to support being imported by Node.

Although they provide a solution to get rid of errors by adding the package to build.transpile :

 build: {
     transpile: ['@googlemaps/js-api-loader'],
 },

It worked for me