"Element type is invalid: expected a string..."

[berzniz]

"Element type is invalid: expected a string..."

[dbertella]

You were right actually it worked. regarding:

2. Uses a react component

a styled-component can work as a first child. You can close this in my opinion!

[berzniz]

Thanks for reporting. What is your setup? no build pipeline, webpack, rollup, browserify? If you can share more information that would be great

[anri-asaturov]

• Electron latest
• react-router 3.x.x
• react latest
• mobx latest
• react-toolbox - this might be important because my entire app is wrapped in ThemeProvider that provides context for react-toolbox control.

When I inspect application state at the exception point - what happens is react is trying to instantiate(probably as a reaction to Overdrive clone) element that has type === undefined.

Nothing else important, no packagers, no browserify.

Latest update of Overdrive with context support didn't fix it btw.

[berzniz]

Thanks for all the information. Will you have time to construct a basic example that shows the bug? I can trace the bug from there

[anri-asaturov]

In a few weeks our app sources will get published and I'll ping you.

[dbertella]

I might have a similar problem. I just introduce the library but I'm not sure that I did everything I should. You can find some working example at this repository: https://github.com/dbertella/food-and-quote/tree/try-react-overdrive (I create a branch for it) I'm using latest version of create react app for the record.

[berzniz]

I see the two usages of <Overdrive>:

1. Passes two children instead of one

<Overdrive id={post.slug}>
  {
    post.featured_image && <img src={`${post.featured_image}?w=640&h=360&crop=1`} alt={post.title} />
  }
  <Title dangerouslySetInnerHTML={createMarkup(post.title)} />
</Overdrive>

which is more than one children. Try wrapping them with a <div>.

2. Uses a react component

<Overdrive id={p.slug}>
  <Card>...</Card>
</Overdrive>

where <Card> needs to allow styling, meaning that if it gets a prop of style it uses it on the first element. example:

const Card = (props) => {
  const {style} = props;
  return <div style={style}>...</div>
}

alternatively, you can also wrap the <Card> in a <div>

[dbertella]

Great thanks for answer, I'll try it later and let you know

[berzniz]

Going to close for "no activity". @dbertella - any news on that?