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.
App.js
import React, {Component, Fragment} from 'react';
import {Typeahead, Control} from 'react-typeahead';
import {FormGroup} from 'react-bootstrap';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
multiple: false
}
}
render() {
const {multiple} = this.state;
return (
<Fragment>
<Typeahead
labelKey="name"
multiple={multiple}
options={[
'Waylon Dalton',
'Justine Henderson',
'Abdullah Lang',
'Marcus Cruz',
'Thalia Cobb',
'Mathias Little',
'Eddie Randolph',
'Angela Walker',
'Lia Shelton',
'Hadassah Hartman',
'Joanna Shaffer',
'Jonathon Sheppard'
]}
placeholder="Choose a state..."
/>
<FormGroup>
<Control
checked={multiple}
onChange={(e) => this.setState({multiple: e.target.checked})}
type="checkbox">
Multi-Select
</Control>
</FormGroup>
</Fragment>
)
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
I created this project using CRA. This error states that there is something wrong in my import/export but i don't find anything wrong in my import/export of both the files, error is focusing on App.js render function and also render of index.js file. I also checked here but it didn't work for me, can someone help me.
Your App import/export is ok.
I think you mixed up the Fragment import (it's part of React) and the Control import:
import React, {Component, Fragment} from 'react';
import {Typeahead} from 'react-typeahead';
import {FormGroup, FormControl as Control} from 'react-bootstrap';
I have had the same issue. In my case it was me using the wrong HOCs from MobX, namely observable instead of observer.
If you have made the same mistake you can fix it by switching
export default observable(MyReactComponent);
to
export default observer(MyReactComponent);
Not so sure if this will help, but this solved it for me.
First code to bring the same error
import React from 'react';
import { BrowserRouter , Route, Link} from 'react-dom';***
import './App.css';
Then I realized that it's actually supposed to be
import React from 'react';
import { BrowserRouter , Route, Link} from 'react-router-dom';***
import './App.css';
Check import statements
It may be likely that your import statements are not importing from the correct files. Make sure that they are all correct.
example:
import { Link } from "react"; // oops! hard to see, but that's the wrong file.
import { Link } from "react-router-dom"; // that's better
Check spelling of components
// what's wrong with this?
const pageOne = () => {
return (<Link to="/pagetwo"> pagetwo </Link>); // oops! spelling of the component is wrong!
};
const pageTwo = () => {
return (<Link to="/"> pageone </Link>);
};
They're not going to work because the spelling of the components are not right. It's easy to spot when you know what you're looking for.
Give your options element a key attribute having a unique id/key like...
<options key={value}>
some dummy options here
<options/>
This should solve the problem.
I tried Commanding all my code and after that I opened them one by one, per function. then the error disappeared. It's weird but that's my way of fixing it.
I think the issue resides here:
import {Typeahead, Fragment, Control } from 'react-typeahead';
The Typeahead import is okay but I think Fragment and Control are the source of your error. Can upi please try to remove them and see if that helps?
Related
New to React JS, props validation practise as follows:
import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
render() {
return (
<div>
<h3>String : {this.props.propstring}</h3>
</div>
);
}
}
App.propTypes = {
propstring : PropTypes.string
}
App.defaultProps = {
propstring : "My Name"
}
export default App;
import React, { component } from 'react';
import ReactDOM from 'react-dom';
import App from './AppProp.js';
ReactDOM.render(<App />,document.getElementById('root'));
Getting an error as:
TypeError: Class extends value undefined is not a constructor or null.
What am I missing here and how can I resolve the above error?
There are 2 possible problems. Most probably you're importing { component }(like you do in your index file, which is wrong), instead of { Component } somewhere in your code and trying to extend component which doesn't exist.
The other reason is that you might be circularly importing classes, but I doubt it. Also, is your file called AppProp.js?
Post the stack trace and it would also help if you post all the components you're using. Post your package.json as well, as you might be using wrong absolute paths.
The code is perfectly fine. I executed it on my local machine and it ran fine.
The only issue you may be facing is to with
circularly importing classes, which is apparently a limitation
Know more from the resource:
https://esdiscuss.org/topic/how-to-solve-this-basic-es6-module-circular-dependency-problem
I am new to react and I tried the following code
person.js
const element = <h1>Hello world</h1>;
export default element;
App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
function Hello() {
return Person.element;
}
class App extends Component {
render() {
return (
<div className="App">
<Hello></Hello>
</div>
);
}
}
export default App;
But getting the below errors
work/my-app/src/person/person.js
3:17 error 'React' must be in scope when using JSX react/react-in-jsx-scope
When I changed to a simple hello word as below, then it works fine.
person.js
const element = 'hello world';
export default element;
I tried with different ways by checking different forum
importing the ReactDom
in person.js changed to module.exports=element
The use of HTML within JS code is known as JSX. The <h1>...</h1> is JSX. You need to import React before you use JSX. Simply shift the import statements before any use of JSX.
person.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import Person from '../src/person/person';
const element = <h1>Hello world</h1>;
export default element;
You need to import React in every file that exports a component (App in this case).
The latest React 17 Version: No need to include React in the scope
If you are struggling with ESlint or run-time CRA warnings, follow these temporary steps to fix until CRA v4 is released: https://github.com/facebook/create-react-app/issues/9850
I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?
To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));
I have a file test_stuff.js that I am running with npm test
It pretty much looks like this:
import { assert } from 'assert';
import { MyProvider } from '../src/index';
import { React } from 'react';
const myProvider = (
<MyProvider>
</MyProvider>
);
describe('Array', function() {
describe('#indexOf()', function() {
it('should return -1 when the value is not present', function() {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});
Unfortunately, I get the error
/Users/me/projects/myproj/test/test_stuff.js:11
var myProvider = _react.React.createElement(_index.MyProvider, null);
^
TypeError: Cannot read property 'createElement' of undefined
at Object.<anonymous> (/Users/me/projects/myproj/test/test_stuff.js:7:7)
What does that mean? I am importing React from 'react' successfully, so why would React be undefined? It is _react.React, whatever that means...
To import React do import React from 'react' You add brackets when the thing you are importing is not the default export in that module or file. In case of react, it's the default export.
This might apply to your other imports depending on how you defined them.
import React, { Component } from 'react'
This worked for me. I'm not sure why it fixed my version of this issue, though. So if you are someone who stumbled upon this problem and you use create-react-app as your starting boilerplate, this way of importing React will do the trick. (as of Oct '18, lol)
For those who are working ReactJS with TypeScript.
import * as React from 'react';
This error occured to me due to carelessness. It's actually
import React from 'react';
Brackets are for named exports such as this:
import React, { useState, useEffect } from 'react';
This issue occurred while importing React from react, I placed it inside curly brackets.
Please do this:
import React, {useState} from "react";
Instead of:
import {React, useState} from "react";
Trying to use destructor for importing the React object may cause you problems like this import {React} from 'react';.
This might be the cause of the error 90% of the time running this code above.
rather use:
import React from 'react';
And then you can access any member of the React class via:
React.
Change:
import { React } from 'react' to import React from 'react'
Because React is a default export and you don’t need curly braces for any default exports.
If in case you need to import multiple classes from 'react', you can have an alias for them except React. Something like,
import React, * as react from 'react';
React is exported by default in that module, no need {}.
I got this when trying to mock a component when unit testing but was not setting it up correctly
What I was doing that caused the error:
jest.mock("./SomeComponent", () => {
return <div>MockSomeComponent</div>
});
What I needed to do:
jest.mock("./SomeComponent", () => {
return () => <div>MockSomeComponent</div>
});
This error can be occured due to carelessness. Please add
import React from 'react'
It will be resolved after that
Learning ReactJS with ES6. Trying to implement React-Bootstrap components. I am also using the react router. I am trying to implement the Navbar component.
It will just be a nabber with the brand and a search box. I aim to expand and use the search box component a lot more so I have put it in its own separate component below.
LocationSearchBox.js
import React, {PropTypes} from 'react'
import Form, {FormGroup, FormControl} from 'react-bootstrap'
export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit">Submit</Button>
</FormGroup>
)
}
The navber will be on all pages so I have put it in the topmost route and its component is the Main.js file shown below along with routes.js to manage client side routes.
import React, {Component} from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
export default class Main extends Component{
constructor(props) {
super(props);
this.props = props;
}
render() {
return(
<Navbar>
<NavbarHeader>
<NavbarBrand>
React-Bootstrap
</NavbarBrand>
</NavbarHeader>
<NavbarCollapse>
<Search/>
</NavbarCollapse>
</Navbar>
)
}
}
routes.js
import React from 'react';
import ReactRouter, {Router, Route, IndexRoute, browserHistory} from 'react-router';
import Main from '../components/Main';
export var routes = (
<Router history={browserHistory}>
<Route path='/' component={Main} />
</Router>
);
Index.js is below and is the entry file to use in Webpack/babel
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from './config/routes';
ReactDOM.render(routes, document.getElementById('root'));
So when i run web pack-dev-server, go to localhost:8080 as the default port the main route should be hitting. I believe it does but I get errors, namely 3 of the same kind.
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Main`.
I believe it might be due to the way I am importing the Navbar components in Main.js, such as NavbarHeader, NavbarCollapse etc but that is a guess. I would really appreciate any help in solving this issue, thank you.
You are using the Button component without importing it:
<Button bsStyle="success" type="submit">Submit</Button>
Import it correctly and the issue should be resolved.