Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "sideEffects": false to package.json #1021

Open
ABuffSeagull opened this issue Aug 15, 2023 · 3 comments
Open

Add "sideEffects": false to package.json #1021

ABuffSeagull opened this issue Aug 15, 2023 · 3 comments
Labels
type: feature request ‘Nice-to-have’ improvement, new feature or different behavior or design.

Comments

@ABuffSeagull
Copy link

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.
Screenshot from 2023-08-15 11-07-19

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.

@ABuffSeagull ABuffSeagull added triage me I really want to be triaged. type: feature request ‘Nice-to-have’ improvement, new feature or different behavior or design. labels Aug 15, 2023
@wangela
Copy link
Member

wangela commented Aug 15, 2023

If you would like to upvote the priority of this issue, please comment below or react on the original post above with 👍 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:

This is an automated message, feel free to ignore.

@usefulthink
Copy link
Contributor

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.

@usefulthink usefulthink removed the triage me I really want to be triaged. label Oct 6, 2023
@ABuffSeagull
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: feature request ‘Nice-to-have’ improvement, new feature or different behavior or design.
Projects
None yet
Development

No branches or pull requests

3 participants