Unable to use Loader in production (Nuxt3)

[braitsch]

Attempts to import Loader fail when attempting to use it in a Nuxt3 app in production. This doesn't appear to be a Nuxt3 or Vite issue.

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

Works fine in development but after building the app, I get the following error:

[request error] [unhandled] [500] 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;

The above suggested solution doesn't work, however importing the entire library does but that's obviously not ideal.

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

Environment details

"@googlemaps/js-api-loader": "^1.14.3" MacOS 12.6 Node v16.14.0

[flavionn]

Update @braitsch, in Nuxt 3 case, this worked

-- Hello. Any news on this? Thanks!

[whataboutpereira]

Same issue on SvelteKit. Works in SvelteKit dev mode, but fails with the identical error when previewing production build.

[gutoaps]

Hello. Has anyone managed to solve this problem yet?

[andycansdale]

@gutoaps

For SvelteKit you can add the following to your vite.config.js:

ssr: {
  noExternal: ['@googlemaps/js-api-loader'],
},

If you are using Astro, then that would go in your astro.config.mjs file under vite, e.g.:

vite: {
  ssr: {
    noExternal: ['@googlemaps/js-api-loader'],
  }
}

Hope that helps ;)

[nicolasstrands]

@gutoaps

For SvelteKit you can add the following to your vite.config.js:

ssr: {
  noExternal: ['@googlemaps/js-api-loader'],
},

If you are using Astro, then that would go in your astro.config.mjs file under vite, e.g.:

vite: {
  ssr: {
    noExternal: ['@googlemaps/js-api-loader'],
  }
}

Hope that helps ;)

This was actually very helpful since I've been stuck on this issue for a little while. Thanks a lot!

[AndrewTannerNA]

This might be related to https://github.com/nuxt/nuxt/issues/14454

I was having issues with SSG as described in that issue but using the temporary workaround (as described in that issue), Google Maps has started mounting correctly in production builds. My map is not in the root ./index.html so I think that the map wasn't mounting because of that. I still need to transpile: ['@googlemaps/js-api-loader'].

[rensvis]

This fixed the issue for me:

// nuxt.config.ts

export default {
  // ...other Nuxt configurations
  vite: {
    ssr: {
      noExternal: ['@googlemaps/js-api-loader'],
    }
  }
}