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

Question

我在我的 Nuxt 3 网站中使用 @googlemaps/js-api-loader。在本地开发中一切正常，但是当我尝试使用 nuxt generate 构建项目时(无论是在本地还是在 Vercel 上)我收到以下错误:

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

加载脚本的重要部分如下所示:

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

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

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

        ...

所以我尝试以不同的方式导入这个包，例如:

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

之前的错误消失了，但现在我得到了

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

我也无法通过默认导出来导入包。您知道发生了什么吗？我该如何解决？

Answer 1

我找到了一个 documentation page与此问题相关的信息如下:

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.

尽管他们通过将包添加到 build.transpile 来提供消除错误的解决方案:

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

对我有用