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.

[jimmyheaddon]

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?

[srosset81]

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.