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

Question

我在我的next 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

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

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

虽然他们提供了一个解决方案，以摆脱错误添加到build.transpile包:

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

它为我工作