babel-plugin-pure-static-props

Fixes 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.

Install

npm i -D babel-plugin-pure-static-props

Or:

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:

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    'babel-plugin-pure-static-props',
  ],
}

Note on styled components

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.