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.

Is this a bug report?


Can you also reproduce the problem with npm 4.x?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)


  1. node -v: 6.9.5
  2. npm -v: 5.0.3
  3. yarn --version (if you use Yarn):
  4. npm ls react-scripts (if you haven’t ejected): 1.0.10

Sorry about removing the template, I figure this will be a pretty quick yes or no answer.

    "react-scripts": "^1.0.7"

So I’ve read around a lot that webpack 2 supports tree shaking out of the box. Cool! Also, I know that material-ui is written such that it SHOULD tree shake. I’m also assuming react-scripts v1.0.7 is built on webpack 2? Anyways:

import { AppBar } from 'material-ui';

When I run the analyzer you guys suggested adding my output is as follows:


Should this not be getting rid of unused components? I’ve googled around a lot trying to figure this one out.

Thanks! -Dan

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:11
  • Comments:19 (6 by maintainers)

github_iconTop GitHub Comments

pshrmncommented, Jul 20, 2017

I believe that part of the tree shaking issues with the current version of React Router is related to the re-exports that we use (react-router-dom re-exports everything from react-router)

Another issue that appears to exist with tree shaking React components is the way that babel compiles class <C> extends React.Component. The current implementation cannot be (safely) tree shaken. I have opened up this issue in hopes of determining the correct steps to getting a side effect free way of compiling classes.

pshrmncommented, Mar 16, 2018

@eluchsinger For Babel transforms, is the PR to watch. With that, class components will be transformed into pure functions that are easy to tree shake (at which point it will be up to library authors to release packages with pure components).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tree shaking - MDN Web Docs Glossary
Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code. It relies on the import...
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 - Wikipedia
In computing, tree shaking is a dead code elimination technique that is applied when optimizing code. Often contrasted with traditional single-library dead ...
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 >
Reduce JavaScript payloads with tree shaking -
Tree shaking is a form of dead code elimination. The term was popularized by Rollup, but the concept of dead code elimination has...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found