Develop Reference

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

Error:
"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.
Check the render method of App."
index.js
import { registerRootComponent } from 'expo';
import App from './App';
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
App.js
import React, { Component } from 'react';
import { NavigationCointainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Favoritos from './Favoritos';
import InfoGeneral from './InfoGeneral';
import Principal from './Principal';
const Stack = createStackNavigator();
export default class App extends Component {
render(){
return(
<NavigationCointainer>
<Stack.Navigator initialRouteName='Principal'>
<Stack.Screen name='Principal' component={Principal}/>
<Stack.Screen name='InfoGeneral' component={InfoGeneral}/>
<Stack.Screen name='Favoritos' component={Favoritos}/>
</Stack.Navigator>
</NavigationCointainer>
);
};
}

This is a very common error, it means you are trying to render undefined as a component. This usually happens in circumstances like this:
MyComponent.js:
function MyComponent() {
return <View />;
}
App.js
import { MyComponent } from './MyComponent';
export default function App() {
return <MyComponent />;
}
Can you spot what is missing? It's export from MyComponent.js. In App.js, MyComponent is undefined because there is no such export. To fix it, you would do this:
MyComponent.js:
export function MyComponent() {
return <View />;
}

I had this error when I tried to get rid of warnings about PascalCase.
The warning:
Imported JSX component text must be in PascalCase or
SCREAMING_SNAKE_CASE react/jsx-pascal-case
I changed all components in my React Redux Form from Control.text, Control.select, Control.textarea to Control.Text, Control.Select, Control.TextArea and started getting this error.
I changed
<Control.Text />
<Control.Select />
<Control.TextArea />
back to
<Control.text />
<Control.select />
<Control.textarea />
and the error was gone.

Creating a class in react and exporting with higher order components

I am writing a class in React and exporting it with a higher order component, presently I have ...
import React, { Component } from 'react';
import { withRouter } from 'react-router';
/**
Project Editor
*/
class SpiceEditorRaw extends Component { ... }
const SpiceEditor = withRouter(SpiceEditorRaw);
export default SpiceEditor;
Then In a different file I import SpiceEditor and subclass it with
import SpiceEditor from './SpiceEditor'
class NameEditor extends SpiceEditor {
constructor(props){ ... }
...
render () { return (<h1> hello world <h1/>) }
}
However I am getting error:
index.js:2178 Warning: The <withRouter(SpiceEditorRaw) /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change withRouter(SpiceEditorRaw) to extend React.Component instead.
I believe it is possible to create a compoenent using withRouter, so I must be syntaxing incorrectly?

You should generally not use extends on any other component than React.Component. I think the Composition vs Inheritance part of the documentation is a great read on this subject.
You can accomplish almost everything with composition instead.
Example
import SpiceEditor from './SpiceEditor'
class NameEditor extends React.Component {
render () {
return (
<SpiceEditor>
{ /* ... */ }
</SpiceEditor>
)
}
}

ReactJS - Handle multiples exports in a file + withRouter

I'm currently working on a web project using NodeJS and ReactJS. I wanted to have two components in a single file because they will use the same pieces of information. One of the component is using withRouter to handle the "this.props.history.push". Since I don't know the syntax to deal with my 2 conditions (withRouter + double export) I'm looking for your help.
I get the error :
Failed to compile
./src/App.js
284:83-110 './components/Dnoc_cvat.js' does not contain an export named 'Dnoc_cvat_bouton_withRouter'.
And in my App.js I wrote :
import {Dnoc_cvat_bouton_withRouter} from './components/Dnoc_cvat.js'
Dnoc_cvat.js :
import React from 'react'
import {withRouter}from 'react-router-dom';
class Dnoc_cvat extends React.Component {
render() {
return(
<h3> DNOC - CVAT </h3>
)
}
}
class Dnoc_cvat_bouton extends React.Component {
constructor(props) {
super(props);
this.handleClick=this.handleClick.bind(this);
}
handleClick(){
this.props.history.push('/DNOC/CVAT');
}
render() {
return(
<div className='component-button' onClick={this.handleClick} >
<p>Hello world</p>
</div>
)
}
}
module.exports={
Dnoc_cvat:Dnoc_cvat,
Dnoc_cvat_bouton_withRouter:withRouter(Dnoc_cvat_bouton)
}

module.exports works only in Node.js.
For the browser, you will need the following export syntax:
import React from 'react'
import { withRouter } from 'react-router-dom'
export class Dnoc_cvat extends React.Component {
...
}
class Dnoc_cvat_bouton extends React.Component {
...
}
export const Dnoc_cvat_bouton_withRouter = withRouter(Dnoc_cvat_bouton)

How can pass a props to a variable?

I'm trying "hydrate" props from elements to child components that will render. The problem is that I can't figure out how I can do it with my configuration.
I have seen this answer, I tried to adapt it, but so far I'm getting errors (see bottom).
For a bit of background, I'm developing a Rails based application that uses React for the front end. So I don't use React router or such, it just "displays" the datas.
Here is how I set everything up:
front.js (where everything gets rendered)
import React from 'react';
import ReactDOM from 'react-dom';
import extractActionName from './lib/extractActionName';
import {elementForActionName} from './lib/elementForActionName';
import 'jquery';
import 'popper.js';
import 'bootstrap';
let actionName = extractActionName();
let value = "value";
let renderElement = function (Element, id) {
ReactDOM.render(
<Element value={value} />,
document.getElementById(id)
);
};
renderElement(elementForActionName[actionName], actionName);
lib/elementForActionName.js
import React from 'react';
import Homeindex from '../home/home';
import Contact from '../home/contact';
// This files create an associative array with id React will be
// looking for as a key and the component as value
export const elementForActionName = {
'index': <Homeindex />,
'contact': <Contact/>,
};
lib/extractActionName.js
export default function extractActionName() {
// The body contains classes such as "home index", so
// I return the "action name" of my controller (home) to
// front.js so I will render the good component
return document.body.className.split(' ').pop();
}
home/home.js
import React from 'react';
import Header from '../layout/header';
import Footer from '../layout/footer';
export default class homeIndex extends React.Component {
render() {
return(
<div>
<Header/>
<h1>Hello this will be the content of the landing page hello</h1>
<Footer/>
</div>
)
}
}
My problem is that I'd like to make an Ajax call in my "front.js" file, then transmit the received data (here, "value"). The error I'm getting is the following:
Uncaught Error: Element type is invalid: expected a string (for
built-in components) or a class/function (for composite components)
but got: object.
I'm lacking experience with React, how can I resolve this problem?
Thank you in advance.

You are currently returning the instance of a component:
export const elementForActionName = {
'index': <Homeindex />, <--- here
'contact': <Contact/>,
};
And then attempting to instantiate it again:
let renderElement = function (Element, id) {
ReactDOM.render(
<Element value={value} />, // <--- here
document.getElementById(id)
);
};
Instead, just use the component class:
export const elementForActionName = {
'index': Homeindex,
'contact': Contact,
};

_pixi2.default.Application is not a constructor?

When i am trying to integrate PIXIjs with Reactjs I was getting this error
pixi_loader.js?0eb2:5 Uncaught TypeError: _pixi2.default.Application is not a constructor
at eval (eval at
My Code
import React, { Component } from 'react';
import PIXI from 'pixi';
import three from '../../../assets/images/3.png';
import five from '../../../assets/images/5.png';
export class PixiLoader extends Component {
constructor(props){
const app = new PIXI.Application();
const graphics = new PIXI.Graphics()
.beginFill(0xFF0000)
.drawCircle(0, 0, 50);
const image = app.renderer.plugins.extract.image(graphics);
document.body.appendChild(image);
super(props)
}
render(){
return(
<div>
{'PIXI'}
</div>
);
}
}
export default PixiLoader;
I have followed this link to work it out.
http://pixijs.download/release/docs/PIXI.extract.html

import * as PIXI from 'pixi';
There is no default export in pixi

I have Solved it using require
let PIXI = require('pixi.js');`