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
Related
I am trying to create a simple page which two main parts: Menu and Guide. In my App,tsx, I have:
import React from 'react';
import Guide from './Guide/Guide';
import './App.css';
function App() {
return (
<Guide />
);
}
export default App;
This is fine.
But, in the ./Guide/Guide.tsx, I have:
import React, { Component } from "react";
import Menu from "./Menu/Menu";
export default class Guide extends Component {
constructor(props: {}) {
super(props);
}
return (
<Menu />
);
}
Menu.tsx:
import React, { Component } from "react";
export default class Menu extends Component {
return (
<h1>Test</h1>
);
};
However I'm getting the error 'return', which lacks return-type annotation, implicitly has an 'any' return type..
What's going on here?
You can probably tell I'm very new to React and TypeScript!
In class component (such as your Guide and Menu components), you render some HTML code inside the render function. Insinde functional components (such as your App component), you render some HTML code inside the return function. Here you are mixing those 2 different syntax, that is why you are getting this error.
In order to fix this, simply replace your return function in the Menu and Guide components by the render function
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?
I'm trying to display my Deal component but I keep getting this error below.
I'm using Meteor with ReactJS.
Uncaught ReferenceError: Deal is not defined
at meteorInstall.imports.routes.routes.js
Here is my routes.js file
<Route path="/deals" component={Deal} secure="auth" />
My Deal.js component file, that the route should be linking too.
import React from 'react';
import { Link } from 'react-router';
import PrivateHeaderNav from './PrivateHeaderNav.js'
export default class Deal extends React.Component {
render() {
return (
<div className="content">
<PrivateHeaderNav/>
Deal
</div>
);
}
}
Am I missing something in the imports or in my Deal component?
Thanks
Your routes.js file is lacking the import of Deal component.
make sure you have this line in route.js:
import Deal from './path/to/Deal.js';
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