在Nuxt3中使用谷歌地图@googlemaps/js-api-loader遇到的问题

90 阅读1分钟

在打包之后,部署在服务器中运行报错如下


 import { Loader } from '@googlemaps/js-api-loader'; 
 ^^^^^^ 
 SyntaxError: Named export 'Loader' not found. The requested module '@googlemaps/js-api-loader' 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 pkg from '@googlemaps/js-api-loader'; 
 const { Loader } = pkg; 
 
 at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
 at async ModuleJob.run (node:internal/modules/esm/module_job:179:5)
 at async Loader.import (node:internal/modules/esm/loader:178:24)
 at async setup (file:///www/wwwroot/.output/server/chunks/build/server.mjs:1227:76) 
 at async Object.callAsync (file:///www/wwwroot/.output/server/chunks/build/server.mjs:92:16) at async applyPlugin (file:///www/wwwroot/.output/server/chunks/build/server.mjs:237:35)
 at async executePlugin (file:///www/wwwroot/.output/server/chunks/build/server.mjs:275:9) 
 at async applyPlugins (file:///www/wwwroot/.output/server/chunks/build/server.mjs:289:5) 
 at async createNuxtAppServer (file:///www/wwwroot/.output/server/chunks/build/server.mjs:2046:7) at async Object.renderToString (file:///www/wwwroot/.output/server/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:19) [Vue Router warn]: uncaught error during route navigation: file:///www/wwwroot/.output/server/chunks/build/find-yQdGEP8O.mjs:5

解决方式如下:

   //将该行 import { Loader } from "@googlemaps/js-api-loader"; 替换为
   import * as gmapsLoader from '@googlemaps/js-api-loader';
   const { Loader } = gmapsLoader;