tinacms: Cannot create styled-component for component: undefined

More, hopefully, good news 😃

I believe I’ve found the issue with the render method of the AsyncButton and I’ve merged the fix: https://github.com/tinacms/tina-graphql-gateway/pull/355

The fix is up on the beta channel for tina-graphql-gateway.

Hopefully good news 😄

I’ve identified another dependency issue that appears to fix the styled-component problem: https://github.com/tinacms/tinacms/pull/1875

It has been released on the next channel, so you can use:

npm install react-tinacms-inline@next react-tinacms-editor@next

-or-

yarn add react-tinacms-inline@next react-tinacms-editor@next

Crossing my fingers that this takes care of the problems listed here 👍 If it does, we’ll make the fix part of the next release.

I’ve also had the same issue when trying to upgrade to TinaCMS v0.42.1. It’s also present when trying to upgrade to 0.43.0-alpha.1 (which is now the latest version)

In my case it looks like the error is thrown by the react-tinacms-inline package, which is only needed in my project as it’s required by the react-tinacms-editor package (not sure how that compares with the tutorials you others are following).

I was able to temporarily workaround the issue but still upgrade to the latest version of tinacms by commenting out the following line in my code (which I previously passed as an option within new TinaCMS):

plugins: [MarkdownFieldPlugin],

There are a few ways to add plugins so something similar might appear in those other tutorials as cms.plugins.add(MarkdownFieldPlugin) or usePlugins([MarkdownFieldPlugin]). The HtmlFieldPlugin also seems to throw the same error.

Obviously this is not a proper fix but might at least allow you to complete the tutorials, just with plain textarea fields rather than HTML/markdown content editors. Hope that helps someone, and that it’s possible to resolve the underlying issue soon.

PS: For what it’s worth, recreating the error is as simple as running import "react-tinacms-inline";

Just to report that original issue I submitted:

“Cannot create styled-component for component: undefined”

Is solved with the latest packages:

"tinacms": "^0.43.3"
"react-tinacms-github": "^0.43.3",
"next-tinacms-github": "^0.43.3",

Thank you guys!

This is perfect, @coreyaus 👍

Turns out it was pretty simple to recreate, so I’ll start chasing this.
Hope to have an update (or at least an idea) sometime today.

I’m also seeing a potentially related error on my project, which uses Tina Cloud. When using the createCloudClient method and completing the authentication process the user is initially redirected to an error page with the following message:

Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports. Check the render method of AsyncButton.

When refreshing the page everything works as expected. That is, the error only appears when landing back on an admin page straight after the authentication process is complete. A full page reload will render everything as expected.

This may be unrelated but I’m including here in case it hints at a possible cause or potential fix to someone more familiar with the internals of the project (i.e. perhaps this relates to the render method of the AsyncButton component?)

I second this problem. Been trying to solve it for 2 whole evenings, naturally thinking the problem was me. Thank you for raising @mbrain-io