how to resolve this error element type is invalid?

Question

I'm getting this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 App.

Here's my App.js code:

import React, { Component } from 'react';
import Particles from 'react-particles-js';
import Clarifai from 'clarifai';
import './App.css';
import Navigation from './Components/Navigation/Navigation';
import Logo from './Components/Logo/Logo';
import Imagelinkform from './Components/Imagelinkform/Imagelinkform';
import Rank from './Components/Rank/Rank'
import Facerecog from './Components/Facerecog/Facerecog';



const app = new Clarifai.App({
  apiKey: '391e77688a1e40ceaf6264a70543fcc5'
 });


const particlesOptions={  
    particles: {
    number:{
      value:30,
      density:{
        enable:true,
        value_area:800
      }
    }
        }
      }
    

  class App extends Component { 
  constructor(){
    super();
      this.state={
        input:'',
        imageUrl:''
      }
  }
  onInputChange=(event)=>{
    console.log(event.target.value);
  }
  onButtonSubmit=()=>{
    this.setState({imageUrl: this.state.input});
    app.models
      .predict( 
        Clarifai.FACE_DETECT_MODEL,
        this.state.input)
        .then(
          function(response){
            console.log(response.outputs[0].data.region[0].region_info.bounding_box)
          },
          function(err){

          }
        )
  }
render(){
  return (
    <div className="App">
      <Particles  className='particles'
              params={particlesOptions}
               />
   <Navigation/>
   <Logo />
   <Rank />
   <Imagelinkform onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/>
   
  <Facerecog imageUrl={this.state.imageUrl} />
    </div>
  );
}
}
export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'tachyons';

ReactDOM.render(
    <App />,
  document.getElementById('root'));
reportWebVitals();

Welcome to Stack Overflow! Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I also recommend Jon Skeet's [Writing the Perfect Question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) and [Question Checklist](https://codeblog.jonskeet.uk/2012/11/24/stack-overflow-question-checklist/). — T.J. Crowder, May 08 '21 at 12:41
I suspect the problem is with one of the components `App` tries to render, not `App` itself. Please **reduce** the problem to a [mcve], ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button). Stack Snippets support React, including JSX; [here's how to do one](http://meta.stackoverflow.com/questions/338537/). — T.J. Crowder, May 08 '21 at 12:43

score 0 · Answer 1 · answered May 08 '21 at 13:41

This is caused by export and import of JS files in your App.js. Make sure you're doing something like in this your app

// SomeFile.js

const SomeFile = () => {
....
....
}
export default SomeFile //Default Export

Now in your App.js

import SomeFile from './SomeFile' // Correct Way
import {SomeFile} from './SomeFile' // Wrong way for default import

An image from here for better understanding

how to resolve this error element type is invalid?

1 Answers1