Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

I export and import default connected stateless functional components in the usual way. – Actually the component which use causes the error is not connected.

There’s objects returned from all of these components which have properties like $$type: Symbol(react.element) etc.

The app breaks and gives this error message:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of CompanyHeaderPartWithoutStructure.

On closer inspection, there’s an initial error message in the console:

Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object. Check your code at CompanyHeaderPartWithoutStructure.js:10.

That line of CompanyHeaderPartWithoutStructure uses <CompanyIconInHeader />

• If replace the contents of CompanyIconInHeader with <span>y</span> and I get the same error. • However, the error disappears if i comment out <CompanyIconInHeader /> from CompanyHeaderPartWithoutStructure.

The object from CompanyIconInHeader (which is the source of the problems) looks like this:

It looks like this both when I debugger immediately after its original definition and when I debugger inside of the component which uses it.

This is the (simplified) component which if I use, I get the error:

import React from 'react';

const CompanyIconInHeader = <span>y</span>;
// debugger
export default CompanyIconInHeader;

This is the module which uses it which React says to check the render method of:

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { getCompanyName } from '../../../CompanyInfo/state/globalCompanySelectors';
import CompanyIconInHeader from './CompanyIconInHeader';

const CompanyHeaderPartWithoutStructure = ({ companyName }) => (
  <h1>
    <CompanyIconInHeader />
    {companyName}
  </h1>
);

export default connect(
  createStructuredSelector({
    companyName: getCompanyName,
  })
)(CompanyHeaderPartWithoutStructure);

Some fruitless attempts to get rid of the error: companyName is undefined at this point – I get the same error if I take it out – also if remove the use of createStructuredSelector and both related imports. Also if I just export default CompanyHeaderPartWithoutStructure, no connect or its import. – Still errors.

The component which in turn uses CompanyHeaderPartWithoutStructure is connected. Even if I reduce this to the point of only importing React and CompanyHeaderPartWithoutStructure and returning CompanyHeaderPartWithoutStructure without connecting, the error is still there. – I’m thinking maybe if I go all the way up the tree and disconnect everything, maybe the error will disappear. – But it wouldn’t solve the problem, so I won’t go on.

I also get the error if I connect the CompanyIconInHeader to the point where it’s just export default connect(null, null)(<span>y</span>); (React then ends the error message with “Check the render method of Connect(Component).”)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

No error.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This is React 16.4.2, Redux 4.0.0, React-Redux 5.0.7.

I get the same behavior with React 16.3.0. (Redux 4.0.0, React-Redux 5.0.7) Also with React-Redux 4.4.9. (React 16.3.0, Redux 4.0.0) Also with Redux 3.7.2 (React 16.3.0, React-Redux 4.4.9). (Also those old React-Redux, Redux with newest React)

App is made with create-react-app and not ejected.

[gaearon]

You’re exporting a React element, not a component.

Change

import React from 'react';

const CompanyIconInHeader = <span>y</span>;

export default CompanyIconInHeader;

to

import React from 'react';

function CompanyIconInHeader() {
  return <span>y</span>;
}

export default CompanyIconInHeader;

Alternatively, at the call site change <CompanyIconInHeader /> to {CompanyIconInHeader}.

In other words, you’re doing something like <<<CompanyIconInHeader />/> which doesn’t work.

[lule75]

You’re exporting a React element, not a component.

Change

import React from 'react';

const CompanyIconInHeader = <span>y</span>;

export default CompanyIconInHeader;

to

import React from 'react';

function CompanyIconInHeader() {
  return <span>y</span>;
}

export default CompanyIconInHeader;

Alternatively, at the call site change <CompanyIconInHeader /> to {CompanyIconInHeader}.

In other words, you’re doing something like <<<CompanyIconInHeader />/> which doesn’t work.

yes this is perfect, just what i need