Plugin Results Blank when Using Styled-Components

[ComputerCarl]

First off, great project. I am just learning Gutenberg development and I was not looking forward to creating components without JSX. However, I trying to produce what I believe to be a pretty straightforward test case that's failing miserably.

I have modified the generated block.js file like so;

...
import FancyDiv from './FancyDiv';
...
    edit: function (props) {
        return (
            <FancyDiv {...props} />
        );
    },
    save: function (props) {
        return (
            <FancyDiv {...props} />
        );
    },
});

and created a FancyDiv.js file;

import styled from 'styled-components';

const FancyBg = styled.p`
    background-color: lightgrey;
`

export default props => <FancyBg>look at me!</FancyBg>

In the editor, the text will appear as expected. In the normal view, the text does not appear. If I do not wrap it in styled-components, it appears as expected.

[ahmadawais]

I believe to be a pretty straightforward test case that's failing miserably

What's failing miserably here is the fact that you are not using React on the frontend which is needed by styled-compnents to render.

Also not related to create-guten-block.