styled-components: Problem with using imported styled components

I have a global file with styled components that I use accross my whole website. When I import these global components to use them directly in React, there is no problem, but if I want to create a new styled components out of them, I get this error:

Uncaught TypeError: Cannot read property 'displayName' of undefined
    at createStyledComponent (eval at <anonymous> (http://localhost:3000/static/js/bundle.js:7296:2), <anonymous>:148:82)
    at eval (eval at <anonymous> (http://localhost:3000/static/js/bundle.js:7350:2), <anonymous>:20:14)
    at eval (eval at <anonymous> (http://localhost:3000/static/js/bundle.js:7575:2), <anonymous>:32:62)
    at Object.<anonymous> (http://localhost:3000/static/js/bundle.js:7575:2)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:554:30)
    at fn (http://localhost:3000/static/js/bundle.js:85:20)
    at eval (eval at <anonymous> (http://localhost:3000/static/js/bundle.js:7557:2), <anonymous>:16:20)
    at Object.<anonymous> (http://localhost:3000/static/js/bundle.js:7557:2)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:554:30)
    at fn (http://localhost:3000/static/js/bundle.js:85:20)

Here is an extract of the code generating this error:

import React from 'react';
import styled from 'styled-components';
import {Div} from '../../global/layout';

const RoundedBar = styled(Div)`
  transition: all 500ms;
  border-radius: 15px;
  height: 15px;
  width: ${props => props.width || "100%"}
`;

If I put this RoundedBar SC inside the global file, there is no error. If I use styled.div instead, there is also no error.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 6
Comments: 19 (7 by maintainers)

Most upvoted comments

TypeScript moans that the JSX element doesn’t support those props, but I can’t pass the props interface the component is using either as that fails. Short of having the styled-component in the same .tsx file I’m not sure how you get the props in?

jimmyheaddon on Feb 3, 2017

Any help or pointing out my glaring errors would be much appreciated!

I keep on getting this error pretty often and it is always due to some sort of cyclic import (ie. A imports B which imports C, which is itself importing A). Cyclic import is generally a sign of bad code architecture, I know. Nonetheless, it seems styled-components doesn’t like them at all.

srosset81 on Feb 1, 2017