Webpack tree shaking support
See original GitHub issue(I’ve temporary disabled CommonChunks to try Carte Blanche)
When I’ve added a variation to my Button component, I get:
warning.js:44Warning: Failed propType: Invalid prop `component` of type `object` supplied to `Playground`, expected `function`.
common.js.js:1 Uncaught SyntaxError: Unexpected token <
warning.js:44 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
ReactCompositeComponent.js:772 Uncaught TypeError: Cannot read property '_currentElement' of null
My Carte Blanche configuration is:
new CarteBlanche({
componentRoot: './app/components',
plugins: [
new ReactPlugin({ injectTags: ['<script src="common.js.js"></script>'] }),
],
}),
My Button component is:
/**
*
* Button
*
*/
import React, { PropTypes } from 'react';
import styleguide from './styleguide';
// Component styling
import CSSModules from 'react-css-modules';
import styles from './styles.styl';
// Component class
@CSSModules(styles, { allowMultiple: true })
class Button extends React.Component {
static styleguide = styleguide;
// Default component properties
static defaultProps = {
type: 'button',
primary: false,
};
render() {
// Style of Button's inner element
let innerStyleName = 'Button__inner';
if (this.props.primary) innerStyleName += ` ${innerStyleName}--primary`;
// Type of the button
const type = this.props.type;
return (
<button
type={type}
styleName='Button'
className={this.props.className}
onClick={this.props.onClick}
>
<div styleName={innerStyleName}>
{this.props.children}
</div>
</button>
);
}
}
// propTypes definition
Button.propTypes = {
// The HTML tag button type
type: PropTypes.oneOf(['button', 'submit', 'reset']),
// Defines if Button will have the `primary` style
primary: PropTypes.bool,
// Function executed on click
onClick: PropTypes.func,
// Optional className applied to Button
className: PropTypes.string,
// This is the content of Button (usually text)
children: PropTypes.node.isRequired,
};
export default Button;
I’m using as base react-boilerplate.
Issue Analytics
- State:
- Created 7 years ago
- Comments:20 (9 by maintainers)
Top Results From Across the Web
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: 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 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 simplified with Webpack! - Opcito
Webpack supports tree -shaking and it uses babel-preset-env package. This package bundles the files and transforms them back to CommonJS ...
Read more >How to Fully Optimize Webpack 4 Tree Shaking | by Craig Miller
This is simple: it's code that Webpack can't see you using. Webpack follows the trail of import/export statements throughout the application, ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Temporary fix is to use
module.exports
instead ofexport default
– Bug
– Good
I’ll make a note to produce a minimal case. Won’t get to it until tomorrow though.