Fixes issue with tree shaking that can occur when using static properties on React components using styled-components
npm install babel-plugin-pure-static-propsFixes an issue with tree shaking that can occur when using static properties on React components using styled-components.
This plugin replaces static property assignments on React components (e.g. MyComponent.defaultProps = {...}) with Object.assign() statements annotated with /#__PURE__/ comments so that tree-shaking will work correctly.
``bash`
npm i -D babel-plugin-pure-static-props
Or:
`bash`
yarn add -D babel-plugin-pure-static-props
Then add the plugin to your Babel config as explained in the Babel documentation.
Example babel.config.js:
`js`
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
'@babel/plugin-proposal-class-properties',
'babel-plugin-pure-static-props',
],
}
The tree-shaking issue with static properties on React components also affects styled components. This plugin only addresses tree-shaking for regular React components; it will not work on components created using the styled` helper.
A fix for styled components is in this PR: https://github.com/styled-components/babel-plugin-styled-components/pull/248.