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

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.

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

There’s some pieces of the puzzle missing here I think;

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

This signifies most likely that Container in const ProfileContainer = styled(Container) is undefined (try to debug it there; also, why try to debug it with the minified build?)

There is no issue if I import the Container component directly but I would rather keep using my export file […]

That’s fair but there’s something going wrong in that file then, I’d say if the reexporting file causes the later imported Container to eventually be undefined.

One weird thing I noticed is:

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

is this just accidental?

Also, try to check for circular imports; sometimes they can cause this behaviour.

i.e. components/A <=> components/index <=> components/B would cause either A to be undefined in B or B to be undefined in A.

This can only be resolved by not going via the index (reexporting) file in those files that are being reexported

Is this issue resolved I am facing the same issue

I am facing with same error. I have 1 generic index.tsx where I do export of all my components. But some components e.g. ChatRoom is using TextBox so when I had ChatRoom export before TextBox it fails.

// FAILS export { default as ChatRoom } from ‘./ChatRoom’ export { default as TextBox } from ‘./Fields/TextBox’

// WORKS export { default as TextBox } from ‘./Fields/TextBox’ export { default as ChatRoom } from ‘./ChatRoom’

I hope that this helps.

@VinceSJ solution fixed this for me as well… my setup (which I imagine is pretty common) is that I have an index file for common components, which exports them all in this fashion, so I can do things like import {X, Y, Z} from 'components/common':

index.js

export { default as TwoColumn } from './Grid/TwoColumn';
export { default as Flex } from './Flex';

TwoColumn is able to directly import and use Flex fine with vanilla React; it’s only when I tried to change this to const Blabla = styled(Flex) inside of TwoColumn that I see the error, so seems like importing should also be supported by SC. This is a nice module pattern so it would be good if this was resolved.

Had the same issue when Importing import { x } from '..' .. references a index.ts and that exports the exports of another index.ts inside a folder.

// index.ts
export { x } from './x-folder'   // This is a folder

// x-folder/index.ts
export { x } from './x-component.ts'

When I changed my import to import { x, y, z } from '../x-folder' it suddenly worked for me. Maybe this might help

To be clear, since it hasn’t been clearly stated, this is not a bug in styled-components but a project/build level issue, hence not something we can fix 😀

There’s a Webpack plugin which warns you about it: https://www.npmjs.com/package/circular-dependency-plugin

I don’t think you’d have to check all even, but you can start one by one as you see these errors, since that’s how you can confirm the theory

still facing this issue, wonder why they closed it !

Also renaming export const MyComponent to export function MyComponent worked for me as well

I’m using babel-plugin-transform-imports with a configuration like this

 [
      "transform-imports",
      {
        "@components": {
          "transform": "@components/${member}",
          "preventFullImport": true
        }
      }
    ],

That way I can still import them via import {Box, Text} from '@components' without having to worry about circular dependencies.

Thanks @kitten! It appeared to be indeed a project issue: forgot to set up mock for svgr components in jest environment, so styled-components was trying to wrap and style undefined.

I was facing the same issue. I solved it by mocking the dependency that was causing this issue.

@pak11273 actually, as I mentioned in my comment before, you can create an index file. Just don’t use it in other components that are also in the index file.

i.e. components/A <=> components/index <=> components/B would cause either A to be undefined in B or B to be undefined in A.

This can only be resolved by not going via the index (reexporting) file in those files that are being reexported

in my case was circular dependencies as well, I was trying to use a component from the same folder which has an index with a switch that contains both

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.

How could one do this with TypeScript? I also have this issue

I just came across this issue while running tests with jest 26.6.3, jest-styled-components 7.0.4, and styled-components 5.2.1 on Node v12. I know we have to upgrade our dependencies, but in case some other unfortunate soul happens across this bug on a similar setup, I resolved the error by updating the export of the original component from const to a named function, e.g.,

// original component
- export const OriginalComponent = ({ … }) => { … };
+ export function OriginalComponent({ … }) { … }

I got the Cannot create styled-component for component: undefined error because I was using transform-es2015-modules-commonjs as a fix for an issue I had using jest. Only using the transform-es2015-modules-commonjs plugin during testing, instead of always using it, fixed it.

It’s probably not related though.