Remix support

[mikecousins]

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;

Getting this error using Remix/ESM. Any idea how to get around this? The suggested config changes for nuxt/svelte don't work in Remix.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with :+1: so we can see what is popular when we triage.

@mikecousins Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[ahockersten]

@mikecousins you can put @googlemaps/js-api-loader in your serverDependenciesToBundle in remix.config.js in order to use this in Remix to get around this, see: https://remix.run/docs/en/main/file-conventions/remix-config#serverdependenciestobundle

[mikecousins]

@ahockersten that's not available in certain Remix setups like Vite/SPA mode.

[mikecousins]

Here's a good linter you can use to help fix the package: https://publint.dev/@googlemaps/js-api-loader

[johny]

Until this is properly fixed, this worked for me:

import * as pkg from "@googlemaps/js-api-loader";

[usefulthink]

I'm using it all the time with exactly this import {Loader} from '...'; syntax without any problems.

An interesting point is, the error-message says The requested module '@googlemaps/js-api-loader' is a CommonJS module, which tells me that whatever bundler you're using isn't loading the ESM-version of the package but instead (presumably) the UMD-version.

I'm not sure if there is anything we can do about this, since it has probably something to do with the configuration of the bundler.