I am learning React.js and can not make my firt component to render. My project looks like this:
javascript
|
--components
| |
| ---- searchbar.jsx
|
|
--app.jsx
searchbar.jsx:
export default class SearchBar extends React.Component {
//some code
render(){
//some code
}
}
app.jsx looks like this.
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchBar } from './components/searchbar.jsx';
ReactDOM.render(
<App />
,
document.getElementById('content')
);
class App extends React.Component {
render() {
<div>
<SearchBar placeHolder='search bar text'/>
</div>
}
}
When compiled and packed there is no error. However when I run it, I am getting following error:
Warning: React.createElement: 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.
printWarning
warning
createElement
1../components/searchbar.jsx
When I put all code in app.jsx and use no import then everything is working as should and search bar is showing.. but I want to put components in different files. How do I do that then?
SearchBar module exports a default value, not a named export (by enclosing with curly braces braces you require a named export )
You should change import { SearchBar } to import SearchBar
Additionally, you should move the declaration of App towards the beginning of the file, it should be declared before it is used
Related
This line of codE:
module.exports = import("./src/client/Hello.js");
Is giving this error:
Uncaught 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.
What am I doing wrong?
// Hello.js
import React, { Component } from 'react';
import Bye from './Bye';
import $ from 'jquery';
export default class Hello extends React.Component {
render() {
return (
<div>
Hello
<Bye/>
</div>
);
}
}
Also I am using webpack. Because of which Hello.js is transpiled.
You should import your component using import:
import Hello from "./Hello";
Read more about importing components here: https://create-react-app.dev/docs/importing-a-component/
I'm a beginner in React.js; I was building a simple Music player app, but in App.js file it gave me an error. Below I am sharing the code of App.js file and the browser generated error.
import React, { Component } from 'react'
import './App.css';
import PlayList from "./componentes/PlayList"
import SearchBar from "./componentes/SearchBar"
import SearchResults from "./componentes/SearchResults"
class App extends React.Component{
//code to be written
}
function App() {
return (
<div>
<h1>
Melophile
</h1>
<div className="App">
<SearchBar onSearch={this.search}/>
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults} onAdd={this.doThese}/>
<PlayList playlistTracks={this.state.playlistTracks} onNameChange={this.updatePlaylistName} onRemove={this.removeTrack} onSave={this.savePlaylist} />
</div>
</div>
</div>
);
}
export default App;
Browser error:
Compiled with problems:
ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\AFRIDI\OneDrive\Desktop\STUDY NOTES\SEM - 4\Minor Project - 1\melophile-app\src\App.js: Identifier 'App' has already been declared. (13:9)
11 | }
12 |
> 13 | function App() {
| ^
14 | return (
15 | <div>
16 | <h1>
Looking for experts help to solve this problem.
The error you are seeing is because you have these two things:
class App extends React.Component{
And
function App() {
Therefore, there is a problem identifying what you are referring to. You either need to rename one of these places or decide what you want to work with (class or functions).
You have a class named App and a function named App. You can't have two things named the same.
What it appears you've done is mixed class-based React syntax with more modern functional syntax. Since you don't have anything written inside the class yet, it seems safe to assume you're not actually using class-based syntax, so you can simply remove the class (delete the following)
class App extends React.Component{
//code to be written
}
In your code you declared App class and then declare App function. So It's giving that App is already declared.
class App extends React.Component{
//code to be written
}
function App() {
So you can do,
Rename any one
Remove any one
Declare function inside class with diff name of class or function
you can use class based component or hook based component. you can't use mix of them.
you can look for more detail information.. https://reactjs.org/docs/hooks-intro.html
I am trying to make use of a JSX.Element within a React application. The compiler is unhappy though.
I have two files Main.tsx and EmployeeMask.js. For some reason I am not sure of I cannot use EmployeeMask in its JSX form <EmployeeMask /> as it is not understood as a JSX component.
Here is my Main.tsx file:
export interface MainProps {}
export interface MainState {}
export class Main extends React.Component<MainProps, MainState> {
public constructor(props: any) {
super(props);
}
private maskChooser(): JSX.Element {
return <EmployeeMask />;
}
public render() {
return <div>
{this.maskChooser()}
</div>;
}
}
Here is my EmployeeMask.js file:
import React from 'react';
export class EmployeeMask extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
EmployeeMask
</div>
)
}
}
The compiler tells me the following though:
(alias) class EmployeeMask
import EmployeeMask
'EmployeeMask' cannot be used as a JSX component.
Its instance type 'EmployeeMask' is not a valid JSX element.
Type 'EmployeeMask' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refsts(2786)
I already tried adding export default EmployeeMask;, but this did not change anything.
Why does the compiler not recognize this as a JSX.Element?
You seem to be calling <EmployeeMask />, but the exported component's name is EmployeeMask2, which means it should be called like <EmployeeMask2 />.
This happens because it is a regular export (export class instead of export default class), so when you import it, you have to use something like import {EmployeeMask2} from '<path>/EmployeeMask.js'.
If you used a default export, you could call it however you want in your file, like:
import Whatever from '<path>/EmployeeMask.js'
I got the answer and wanted to post it here in case someone has had the same problem. I found this online TypeScript to JavaScript transpiler in which I could transpile a working TypeScript class into JavaScript in order to compare and find out what was the problem before.
Diffing the result with what I had showed that the import was the problem.
import React from 'react';
instead of
import * as React from 'react';
Correcting this by adding "* as " solves the problem and makes the class usable.
I am trying to import a React component dynamically, in order to render it inside an element. However, it doesn't work and throws an exception saying :
"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"
Do you have any idea?
This is how I have imported the component:
import('../assessment/assessmentContainer').then(x=>{
ReactDOM.render(<x.AssessmentContainer />, document.getElementById('root'));
});
} ```
And this is my component which is exported
import React, { Fragment } from 'react';
``` export default class AssessmentContainer extends React.Component{
render(){
return(
<Fragment>
{"Assessment!"}
</Fragment>
)
}
} ```
You are exporting a default from your component. You have the option of naming the export of your component or using the default in your import.
import('../assessment/assessmentContainer').then(x=> {
ReactDOM.render(<x.default/>, document.getElementById('root'));
});
Try this : https://codesandbox.io/s/pensive-darkness-vi3xe
import('../assessment/assessmentContainer').then(x=> {
ReactDOM.render(<x.default.AssessmentContainer/>,
document.getElementById('root'));
});
I am attempting to use a single entry file for android and iOS in a React Native app.
I have followed a few tutorials and have ended up with the following:
index.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and Android</Text>
);
}
}
index.ios.js
import React from 'react';
import { AppRegistry } from 'react-native';
import {Main} from './index';
AppRegistry.registerComponent('Main', () => Main);
I end up with the following 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.
If I remove the curly braces from Main in the import statement it says '...but got: object' so I feel like it's something to do with my exporting/importing but nothing seems to work. Any help would be appreciated.
You are exporting your Main component as:
export default class Main extends Component {
but importing as:
import {Main} from './index';
The default export should be imported as:
import Main from './index';
If you use default export, you must import like this. If this doesn't work, there must be another problem in your code.
React Native tries to import based on platform. For example, if you have index.ios.js and index.android.js in the same folder, React Native will bundle index.ios.js only if it is bundling for ios. It is possible that when you import from ./index, React Native is revolving the path with index.ios.js instead of index.js because you are bundling for ios.
If you are curious enough, you can try to console.log the content of the imported module, e.g. console.log(Main) to see what is actually getting imported.