uncaught error: invariant violation: element type is invalid: expected a string (for built-in components) or a class/function but got: object

This error can rise if you try to import a non-existent component. Make sure you have no typo and that the component indeed named that way. In case of libraries make sure you use the proper version, since components can have different names in different versions. – totymedli Jun 27, 2018 at 3:16 At your import statements make sure you have not mixed up named and default imports based on your corresponding export statements So, for example, if you have Component.jsx and Component.scss in the same folder and you try to do this:

This is our Splunktool team suggestion ✌, we tried and its working fine

In my
case (using Webpack) it was the difference between: 
   import {
      MyComponent
   } from '../components/xyz.js';
vs
import MyComponent from '../components/xyz.js';

In my case (using Webpack) it was the difference between:

import {
   MyComponent
} from '../components/xyz.js';

import MyComponent from '../components/xyz.js';

Suggestion : 2

The error "Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got" occurs for multiple reasons: The error message "Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got:" occurs when we try to use something that is not a function or class as a component. To solve the error "Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got", make sure to import named exports using curly braces and default exports without, and only use functions or classes as components.

1._

Copied!// 👇️ must be function or class (NOT variable)
const Button = <button>Click</button>;

export default function App() {
  // ⛔️ Warning: React.jsx: type is invalid -- expected a string
  // (for built-in components) or a class/function
  // (for composite components) but got:
  return (
    <div>
      <Button />
      <h1>hello world</h1>
    </div>
  );
}

2._

Copied!// 👇️ is now function
const Button = () => {
  return <button>Click</button>;
};

export default function App() {
  return (
    <div>
      <Button />
      <h1>hello world</h1>
    </div>
  );
}

3._

Copied!// 👇️ default export
export default function Header() {
  return <h2>Hello world</h2>;
}

5._

Copied!// 👇️ named export
export function Header() {
  return <h2>Hello world</h2>;
}

6._

Copied!// 👇️ named import
import {Header} from './Header';

export default function App() {
  return (
    <div>
      <Header />
    </div>
  );
}

Suggestion : 3

index.js:946 Uncaught Invariant Violation: 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. This is very similar to https://facebook.github.io/react-native/docs/tutorial.html and I don't see what I am not sure what I am exporting/importing incorrectly . It looks like you're importing your App component wrong. You're exporting it as default, but importing it as a named export.

1._

   import React from 'react'
   import ReactDOM from 'react-dom';
  export default class App extends React.Component{

      render(){
          return (
               <div>
             <ul>
	          <li>Home</li>
	     </ul>
                        {this.props.children}
              </div>
  	      );
      }
   }    


   export  class Home extends React.Component{

        render(){
         return (
               <div>
                     <h1>Home...</h1>
                 </div>
              )
       }
   }

2._

  import React from 'react';
  import ReactDOM from 'react-dom';
  import {App,Home} from './Forms.jsx';
  import {  Route, hashHistory } from 'react-router'
  import Router from 'react-router';

   ReactDOM.render((
       <Router history = {hashHistory}>
       <Route path = "/" component = {App}>
       <Route path = "/home" component = {Home} />
               </Route>
      </Router>
       ), document.getElementById('app'));




                "history": "^4.6.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^5.0.3",
"react-router": "^4.0.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"

3._

import App, {
   Home
} from './Forms.jsx';

Suggestion : 4

Error Invariant Violation Element type is... 78081/invariant-violation-element-expected-components-function TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm" May 23 Implement Optical Character Recognition in Python

This is my code:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

My Home.jsx file:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;

I am getting this error:

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

Suggestion : 5

Support » Developing with WordPress » Element type is invalid: expected a string (for built-in components) or a class/ See: https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args%5B%5D=undefined&args%5B%5D= for the full message or use the non-minified dev environment for full errors and additional helpful warnings. I think two of the imports – TextControl and NumberControl – live in the components package.

edit.js:

    /**
     * React hook that is used to mark the block wrapper element.
     * It provides all the necessary props like the class name.
     *
     * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
     */
     import { useBlockProps, TextControl, NumberControl, MediaPlaceholder } from '@wordpress/block-editor';
    
     /**
      * The save function defines the way in which the different attributes should
      * be combined into the final markup, which is then serialized by the block
      * editor into <code>post_content</code>.
      *
      * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
      *
      * @param {Object} props            Properties passed to the function.
      * @param {Object} props.attributes Available block attributes.
      * @return {WPElement} Element to render.
      */
     export default function Edit( { attributes, setAttributes } ) {
        return (
            <div className="section section-hero">
                <div className="row">
                    <div className="col-45">
                        <h1 className="fl-heading padding-20-20 mobile-centered" id="hero-title">
                            <span className="fl-heading-text">
                                <TextControl
                                    label='Heading'
                                    value={ attributes.hero_heading }
                                    onChange={(val) => {
                                        setAttributes({ hero_heading: val });
                                    }}
                                />
                            </span>
                        </h1>
                        <p className="padding-20-20 mobile-centered">
                            <TextControl
                                label='Description'
                                value={ attributes.hero_description }
                                onChange={(val) => {
                                    setAttributes({ hero_description: val });
                                }}
                            />
                        </p>
                        <p id='hero-buttons' className='padding-20-20 mobile-centered' style={{marginBottom: 0}}>
                            <a href='https://sandbox.mandoemedia.com/signup?origin=mktg_portal' className='pp-button-1' role='button' target='_self'>
                                <TextControl
                                    label='Button 1 CTA'
                                    value={attributes.button_1_cta}
                                    onChange={(val) => {
                                        setAttributes({ button_1_cta: val });
                                    }}
                                />
                            </a>
                            <a href='https://sandbox.mandoemedia.com/sandbox-wizard' className='pp-button-2' role='button' target='_self' onclick=''>
                                <span className='pp-button-2-text'>
                                    <TextControl
                                        label='Button 2 CTA'
                                        value={attributes.button_2_cta}
                                        onChange={(val) => {
                                            setAttributes({ button_2_cta: val });
                                        }}
                                    />
                                </span>
                            </a>
                        </p>
                        <div className="pp-rating-content padding-20-20">
                            <div className="pp-rating mobile-centered">
                                <i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i><i className="pp-star-full">★</i>
                            </div>
                            <div className="pp-rating-title mobile-centered">
                                <NumberControl
                                    label='Number of 5 Star Reviews'
                                    isShiftStepEnabled={false}
                                    value={ attributes.number_of_5_star_reviews }
                                    onChange={(val) => {
                                        setAttributes({ number_of_5_star_reviews: Number(val) });
                                    }}
                                />
                                + 5-star reviews on Google</div>
                        </div>
                    </div>
                    <div className="col-55">
                        <div id="videoLaunch">
                            if(attributes.hero_image_URL) {
                                (
                                    <img
                                        src={ attributes.hero_image_URL }
                                        // onClick={ openEvent }
                                        id="mm-hero"
                                    />
                                )
                            }
                            else {
                                (
                                    <MediaPlaceholder
                                        onSelect = { media => { setAttributes({ hero_image_alt: media.alt, hero_image_URL: media.url }); } }
                                        allowedTypes = { [ 'image' ] }
                                        multiple = { false }
                                        labels = { { title: 'Upload' } }
                                    >
                                    </MediaPlaceholder>
                                )
                            }
                            <div className="mm-video-popup-icon"><i className="fas fa-play"></i></div>
                        </div>
                        <div id="vidBoxContainer">
                            <button type="button" id="vidClose" title="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
                                    <path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path>
                                </svg>
                            </button>
                            <div id="vidBox">
                                <video id="mm-video" url={attributes.hero_video} controls="" controlsList="nodownload"></video>
                            </div>
                        </div>
                    </div>
                    <div className="clear"></div>
                </div>
            </div>
        );
     }

block.json:

    {
       "$schema": "https://schemas.wp.org/trunk/block.json",
       "apiVersion": 2,
       "name": "mandoe/mandoe-hero",
       "version": "0.1.0",
       "title": "Mandoe Hero Section",
       "category": "text",
       "icon": "flag",
       "description": "A hero section with dual CTA buttons and video",
       "attributes": {
          "hero_heading": {
             "type": "string"
          },
          "button_1_cta": {
             "type": "string"
          },
          "button_2_cta": {
             "type": "string"
          },
          "number_of_5_star_reviews": {
             "type": "number"
          },
          "hero_image_ID": {
             "type": "number",
             "default": 0,
             "selector": "#mm-hero"
          },
          "hero_image_URL": {
             "type": "string",
             "default": "https://mandoemedia.com/wp-content/uploads/2022/08/Mandoe-digital-signage.jpg",
             "selector": "#mm-hero"
          },
          "hero_image_alt": {
             "type": "string",
             "selector": "#mm-hero"
          },
          "hero_video": {
             "type": "string",
             "selector": "#mm-video"
          }
       },
       "supports": {
          "html": false
       },
       "textdomain": "mandoe",
       "editorScript": "file:./index.js",
       "editorStyle": "file:./index.css",
       "style": "file:./style-index.css"
    }

I think two of the imports – TextControl and NumberControl – live in the components package.

You could try the following:

js
import {
   useBlockProps,
   MediaPlaceholder
} from '@wordpress/block-editor';
import {
   TextControl,
   __experimentalNumberControl as NumberControl
} from '@wordpress/components';

Suggestion : 6

There was a problem with my imports.I was using the following Getting following error after migrating to material-ui 1.0 Which need to be updated to

1._

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.

2._

import {
   ListItem,
   ListItemIcon,
   ListItemText
} from '@material-ui/core/List';

3._

import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';