question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nested package.json files break tree shaking

See original GitHub issue

Intended outcome:

When I import from @apollo/client or any of its entrypoints (e.g. @apollo/client/react/hoc), Webpack should be able to correct tree-shake unused exports.

Actual outcome:

Webpack ends up including files that aren’t actually required by the imported values.

This occurs because Webpack uses the closest ancestor package.json to check for a "sideEffects" field to determine if tree-shaking is permissible. The root package.json in @apollo/client does correctly declare that only a single file in the package has side effects. However, before publishing, ./config/prepareDist.js creates additional, minimal package.json files for all of the various entrypoints that the package exposes. These package.json files do not have a "sideEffects" field, which means Webpack will refuse to perform tree shaking on them.

I can put together a reproduction if desired by the maintainers, but this is a pretty cut-and-dry bug, and the fix seems relatively straightforward: add "sideEffects" false to all nested package.json files. This will break down for the one entrypoint with a file that does have side effects, but I imagine this could either be hardcoded in https://github.com/apollographql/apollo-client/blob/main/config/entryPoints.js, or else done dynamically based the contents of the sideEffect field in the root package.json file.

Versions

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - ~/git/universal-roundup-client/node_modules/.bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Edge: 90.0.818.56
    Firefox: 88.0
    Safari: 14.1
  npmPackages:
    @apollo/client: ^3.3.16 => 3.3.16 
    @apollo/react-testing: ^3.1.4 => 3.1.4

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:11
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
nwalters512commented, May 13, 2021

@nwalters512 Just released the changes from #8213 in @apollo/client@3.4.0-beta.26, if you want to check that out. 🙏

Looks great, thanks for the speedy fix! Excited to adopt this once 3.4.0 is released 🚀

2reactions
benjamncommented, May 13, 2021

@nwalters512 Just published this in @apollo/client@3.3.18 as well, in case that’s an easier upgrade.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tree shaking and code splitting in webpack - LogRocket Blog
Tree shaking, also known as dead code elimination, is the practice of removing unused code in your production build. It's important to ship...
Read more >
Tree-Shaking: A Reference Guide - Smashing Magazine
Simply put, tree-shaking means removing unreachable code (also known as dead code) from a bundle. As Webpack version 3's documentation states: “ ...
Read more >
Tree-shaking nested modules with webpack 4 - Stack Overflow
When I import only the Header component, the Button module is removed as expected, but my webpack bundle contains the ButtonGroup component.
Read more >
Tree Shaking - webpack
Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module...
Read more >
Tree-Shaking Problems with Component Libraries - Medium
Add a "sideEffects" property to your project's package.json file. ... Under the hood, Webpack does part of tree-shaking itself, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found