Import issues with Grommet 1.3.0

I’ve upgraded from Grommet 1.2.1 to 1.3.0 and found a couple of issues with my imports.

Here’s an example of how I include Grommet’s components using ES6 and Babel:

My custom app class:

import Grommet from 'grommet';

export class App extends React.Component {

	static propTypes = {
		children: React.PropTypes.element
	}

	constructor() {
		super();
	}

	render() {
		return (
			<Grommet.App centered={ false }>
				{ this.props.children }
			</Grommet.App>
		);
	}
}

After upgrading Node complained Cannot read property 'App' of undefined. I had to change my import statement to this:

import GrommetApp from 'grommet/components/App';

Similar is true for icons. I used to be able to do

import { Icons } from 'grommet';

//...
	render() {
		return <Icons.Base.Menu />;
	}
//...

This throws the similar error Cannot read property 'Base' of undefined.

I understand that it’s not necessarily optimal to import Grommet and Icons directly, but is this really an intentional change between 1.2.1 and 1.3.0?

Your Environment

• Grommet version: 1.3.0
• Node v4.4.7 with Babel and Webpack

[alansouzati]

Humm 😢

I need to double check that, but you are probably right. Sorry it is being a while since I’ve touch the commonjs bundle and I apologize for the back and forth.

[arabold]

I’m happy to tell you that this works as expected now 👍

Thanks for taking care of all the issues. I will rework our code to use the Icon postfix in future.