Uncaught Error: Cannot create styled-component for component: undefined

I’m getting this type of error with a very simple component:

Uncaught Error: Cannot create styled-component for component: undefined
    at constructWithOptions (styled-components.es.js:2109)
    at styled (styled-components.es.js:2044)
    at eval (index.js:43)
    at Object.<anonymous> (bundle.js:2569)
    at m (bundle.js:1)
    at t (bundle.js:1)
    at eval (index.js:48)
    at Object.<anonymous> (bundle.js:101)
    at m (bundle.js:1)
    at t (bundle.js:1)

This component produces the error:

import {Container} from '../../components/index.js'

const ProfileContainer = styled(Container)`
  width: 100%; 
`
class Profile extends Component {
  render() {
    return (
      <ProfileContainer />
    )
  }
}

export default Profile

Here is the file that I export my components:

import Container from '../components/Container'
import Box from '../components/Box'
import List from '../components/List'

export {
  Container,
  Box,
  List
}

Here is the imported Container component:

import React, {Component} from 'react'
import styled from 'styled-components'

const Container = styled.div`
  display: ${props => props.display};
  grid-template-columns: ${props => props.gridtemplatecolumns};
  overflow-x: ${props => props.overflowx};
  overflow-y: ${props => props.overflowy};
`
export default Container

There is no issue if I import the Container component directly but I would rather keep using my export file so I can do things like this:

import {Container, Box, List} from '../../components/index.js'

Issue Analytics

State:
Created 6 years ago
Reactions:36
Comments:25 (4 by maintainers)

Top GitHub Comments

352reactions

VinceSJcommented, Sep 10, 2018

I had the exact same issue and was able to get around it after I saw this comment on another repo. Basically, the trick was this:

// fails
const ExtendedComponent = styled(OriginalComponent)`
  [Your awesome styles here]
`;

// works
const ExtendedComponent = styled(props => <OriginalComponent {...props} />)`
  [Your awesome styles here]
`;

I did not have to address any sort of circular import issue, although I should be encountering the exact same problem. I have a single central index file where I export ComponentA (which is styled). I then import that in another file (from the index), extend the styles as I talked about above to create ComponentB, which I use in making ComponentC, which then gets exported in the exact same index file.

No clue why this trick is working for me – if somebody knows and could tell me, I’d love to learn, thanks.

30reactions

ducincommented, Oct 1, 2020

@DoctypeRosenthal probably it’s not a problem with the package but with the application codebase itself.

The solution by @VinceSJ does work and it helped us, but it’s an overcome. Together with @agnieszkaac we’ve found out the problem were circular dependencies within our codebase formed by JS/TS import statements. Imports are processed synchronously and if there is a cycle, then JS might continue with a certain imported value being undefined

The solution that worked perfectly for us is:

install madge npm package which processes given codebase and build depencency graphs. We use it to find cycles.
run as CLI tool with --circular flag (e.g. madge src/index.tsx --warning --circular)
the tool sets non-zero exit code, co it works perfectly within CI/CD tools and husky (will break build/git hook if circular dependency found)
graphviz and drawing diagrams is unnecessary
supports TS and especially, the baseUrl compiler option which allows to replace relative import paths (e.g. from ../../../components/x/y/z) with absolute paths based on the directory (e.g. from components/x/y)

Often, using index files (index.js which includes export * from './xyz') introduces circular dependencies. A quick fix in many cases is to replace import A from './lib' where index.js was re-exporting the contents with direct file `import A from ‘./lib/a’.

Again, @VinceSJ quick fix helped us to carry on, but after we removed the root cause, the quick fix was not needed anymore 😃

Top Results From Across the Web

Jest - `Cannot create styled-component for ... - Stack Overflow

Show activity on this post. I'm running into the following error when testing my application using jest : FAIL ● Test suite failed...

cannot create styled-component for component: undefined.

I get the Cannot create styled-component for component: undefined error when I try to instantiate the ServerStyleSheet but it works fine without it....

FAQs - styled-components

By declaring a styled component inside the render method of a react component, you are dynamically creating a new component on every render....

you are trying to create a styled element with an undefined ...

you are trying to create a styled element with an undefined component. you may have forgotten to import it. Add Answer | View...

[Styled Component] 적용안되는경우2 - 개발공부 임고미

styled components component cannot create styled-component for component: undefined. 라는 문구가 뜬다. 이때 위와 같은 방법으로 props을 ...