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

Question

@googlemaps/js-api-loader我正在我的 Nuxt 3 网站中使用。在本地开发中一切正常，但是当我尝试使用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:

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

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

我找到了与这个问题相关的文档页面，有以下信息：

如果您遇到这些错误，则几乎可以肯定问题出在上游库上。他们需要修复他们的库以支持 Node 导入。

尽管他们提供了一种通过将包添加到以下位置来消除错误的解决方案build.transpile：

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

这对我有用