Sometimes, Webpack’s tree-shaking may accidentally eliminate imported code from import statements.
For example, we may have a root JS file that imports a CSS file:-
import React from 'react';
import ReactDOM from 'react-dom';
import '../css/index.css';
...
… and for some reason, the CSS file will never appear in the final bundle even if the Webpack config contains proper rules to handle CSS files.
SOLUTION
To prevent Webpack from removing any “unreferenced” code (ex: global CSS files, JS polyfills, etc), list these side effects under package.json, for example:-
Adding this componentDidUpdate(..) lifecycle allows us to quickly find out which property or state has changed.
When running the app, the console may display something like this:-
The key is to look for identical object or array displayed in both “BEFORE” and “AFTER” statements. This shows that while the values look similar, they fail on strict equality check (‘===’), which causes the component to re-render.