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'

[VinceSJ]

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.

[ducin]

@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 😃