google-maps-services-js
google-maps-services-js copied to clipboard
Add `"sideEffects": false` to `package.json`
Is your feature request related to a problem? Please describe.
Without this field, certain bundlers (namely ESBuild) don't know if they tree-shake this package correctly, so they'll leave it in just in case. In my Remix project, this causes a 1.5MB node:crypto polyfill to be included in the bundle for no reason.
Describe the solution you'd like
Simply adding "sideEffects": false to the package.json is enough to fix it. I've tested this with patch-package and everything works perfectly.
Describe alternatives you've considered N/A
Additional context I'd make a pull-request, but I'd imagine it's easier to have someone on the team do it than to have to do the whole CLA song and dance.
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.
@ABuffSeagull 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-mapstag
This is an automated message, feel free to ignore.
Hey @ABuffSeagull,
this module is very likely free of sideEffects per the webpack definition:
A "side effect" is defined as code that performs a special behavior when imported, other than exposing one or more exports. An example of this are polyfills, which affect the global scope and usually do not provide an export.)
However, I'd like to point out two things:
- this package is only meant to be used in server side applications. Although it might work in certain situations, bundling it into a client-application is not officially supported or recommended. What you are seeing (importing a massive polyfill for the crypto-library) is part of the reason why.
- from the screenshot you shared, it looks like you are using the places autocomplete service. This service (as all others) requires the serializer, which in turn needs the url-signing functions which uses crypto-functions to compute a checksum for urls in certain cases. None of that would be going away by marking the package sideEffect free.
The recommended way to use the autocomplete API in a regular client-application is either using the Maps JavaScript API or directly via fetch.
Depending on your use-case, something as simple as
async function queryAutocomplete(input) {
const url = new URL('https://maps.googleapis.com/maps/api/place/queryautocomplete/json');
url.searchParams.set('input', input);
url.searchParams.set('apiKey', YOUR_API_KEY);
const res = await fetch(url.toString());
const data = await res.json();
return data.predictions;
}
could already be enough.
Hey, thanks for the response!
In my use case, I'm using Remix which colocates both server and client code in the same file, and relies on tree-shaking in order to remove the server-side code from the client-side bundle.
Without the "sideEffects": false property, the compiler does not know whether it is allowed to remove this package from the client side bundle, leading to the situation shown in the original post. You can see more info here.