react: 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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 12
Comments: 22

Links to this issue

Astro site not building | error Command failed with exit code 1 - Support - Netlify Support Forums

Commits related to this issue

Fixed very strange compilation bug with download page https://github.com/facebook/react/issues/13445 — committed to w-henderson/Equion by w-henderson 2 years ago

Most upvoted comments

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

Change

import React from 'react';

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

export default CompanyIconInHeader;

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.

+500

gaearon on Aug 20, 2018

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

+85

lule75 on Sep 20, 2019

Changing my component to:

function CompanyIconHeader(props) {}

…did not remove the error.

+60

GProSoftware828 on Dec 10, 2019

My mistake was that I was mixing and matching between es6 modules and commonjs:

If something was exported, use import for getting it on the receiving end.
If something was module.export=ed, use require() for getting it.

+43

Luxiyalu on Mar 5, 2020

Ctrl + c, npm start Perfect solution

+39

toringo on Aug 18, 2020

@gaearon i have the same problem but i m working with routes should i turn it to function or keep it like this : const Allproject = ({getallprojects,project: {project,loading}}) => { useEffect(()=>{ getallprojects(); }, [loading]); return ( <Fragment>

            {project.map((d) => (<tr key={d._id}><td>{d.name}</td><td>{d.description.substring(0, 30)}</td><td>{d.startDate}</td><td>{d.endDate}</td></tr>))}
        </tbody>
    </Table>
    </Fragment>
)

};

Allproject.propTypes = { getallprojects: PropTypes.func.isRequired, project: PropTypes.object.isRequired, }; const mapStateToProps = state => ({ project: state.project }); export default connect(mapStateToProps,{getallprojects})(Allproject);

+16

MejriNizar on Mar 17, 2020

Also I have met this problem, the thing is that when I import other components, I use import {ComponentName}, while the component is exported by export default ComponentName. So remove “{}” when you import the component.

+15

shuochen18 on Apr 3, 2020

Also I have met this problem, the thing is that when I import other components, I use import {ComponentName}, while the component is exported by export default ComponentName. So remove “{}” when you import the component.

+13

ahmedHalim2290 on Apr 10, 2020

write like this can be work

import React, { Component } from “react”;

const HOC = (InnerComponent) => class extends Component { render() { return <InnerComponent {…this.props} />; } };

class App10 extends Component { render() { return ( <div> <Button>button</Button>

<LabelHOC>label</LabelHOC> </div> ); } }

const Button = HOC((props) => <button>{props.children}</button>);

class Label extends Component { render() { return <label>{this.props.children}</label>; } } const LabelHOC = HOC(Label); export default App10;

haojunfu on Aug 9, 2021

i had this bug, in my case, it is like this, i did: const AnimatedBlockView = Animated.createAnimatedComponent(<BlockView />) my code below worked: const AnimatedBlockView = Animated.createAnimatedComponent(BlockView)

gpbaculio on Mar 24, 2020

Ended up here after seeing this cryptic error in Gatsby:

Error: 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 HotExportedComponent.

What I had forgotten was to export default my function. I only had export.

Hope this helps others that run into the same issue.

I had the symmetrical problem. I’ve replaced my previous import: const ButtonGroup = require(‘react-bootstrap/ButtonGroup’); with: const ButtonGroup = require(‘react-bootstrap/ButtonGroup’).default;

Now I can use ButtonGroup as a component.

Thefolle on May 18, 2020

Ended up here after seeing this cryptic error in Gatsby:

Error: 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 HotExportedComponent.

What I had forgotten was to export default my function. I only had export.

Hope this helps others that run into the same issue.

dandv on Apr 21, 2020