I am creating a simple form with react.js and getting this error:
:- Line 5:18: 'App' is not defined react/jsx-no-undef
My app.js file:
import React, { Component } from 'react'
import Table from './Table';
class App extends Component {
render() {
return ( )
}
}
export default App
Check this line in the file index.js :
import App from './App';
Solution 1 :
The first letter of App must be uppercased like import App from.. not import app from..
Solution 2 :
Otherwise if your file is named like app.js, rename it to App.js
Don't leave your return() empty. Try this.
import React, { Component } from 'react';
import Table from './Table';
class App extends Component {
render() {
return (
<div>
//enter any jsx in here
</div>
)
}
}
export default App;
Related
on my freshly installed app i try to import my components like this:
import {Cards , Chart , CountryPicker} from '../components'
and i made an index.js directory:
export {default as Cards} from './Cards/Cards'
export {default as Chart} from './Chart/Chart'
export {default as CountryPicker} from './CountryPicker/CountryPicker'
but it return error :Uncaught SyntaxError: Unexpected token 'export'.
i am doing this trying to copy a tutorial and it looks like it works for the tutor but not me!
This is the basic format for Reactjs.
for more you can Basic example here
//Card
import React from 'react';
const Card = (props) => {
return (
// JSX code
)
}
export default Card;
//Chart
import React from 'react';
const Chart = (props) => {
return (
// JSX code
)
}
export default Chart;
//CountryPicker
import React from 'react';
const CountryPicker = (props) => {
return (
// JSX code
)
}
export default CountryPicker;
//index.JSX
import {Card} from './component/Card';
import {Chart} from './component/Chart';
import {CountryPicker} from './component/CountryPicker';
I think you should first define the components individually and each component should be exported at the bottom of the definition page like so...
import React from "react"
const Cards = () => {
//Helper functions here
return (
//Jsx here
)
}
export default Cards
And then you can now import this component in your App.js component based on the relative path like so...
import Cards from "./components/Cards/Cards";
This is assuming Cards is 2 folders deep from your home directory.
the problem was that i have not put my component folder inside the src folder. hence webpack did nothing about it and it was interpreted as a raw js file which resulted in the error. moving it to the src folder did the trick!
Just started using react and i am following a tutorial. I have the same code as him but i am getting the following error.
./src/index.js
Attempted import error: './components/App' does not contain a default export (imported as 'App')###
Here are my index and component file.
my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
<App/ >,document.getElementById('root')
)
my App.js
import React, {Component} from 'react';
class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}
You need to export your App component.
Under the component put export default App
It should look like:
import React, {Component} from 'react';
class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}
export default App
export the App Component
Try following
import React, {Component} from 'react';
export default class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}
I was exporting a React.js Component (Comp.jsx) to App.js (the main file) and
got this error.
Error: ./src/App.js Attempted import error: './Components/Comp.jsx' does not contain a default export (imported as 'Comp').
Comp.jsx
import React from 'react'
import ReactDOM from 'react-dom'
function MyInfo() {
return (
<div>
<h1>My Name</h1>
<p>This is a Para</p>
</div>
)
}
ReactDOM.render(<MyInfo/>,document.getElementById('root'))
App.js
import React from 'react';
import Comp from './Components/Comp.jsx';
function App() {
return (
<Comp>Hello World</Comp>
);
}
export default App;
You must also export the MyInfo Component.
The MyInfo Component/function is only declared and not exported.
Put
export default MyInfo
at the bottom of the Comp.jsx file
or
export default function MyInfo()...
where the function is declared
. This way the MyInfo component can be imported and used in other files.
Also the ReactDOM.render must be in the App.jsx file. See https://codesandbox.io/s/reverent-fermi-44r26
Instead of:
ReactDOM.render(<MyInfo/>,document.getElementById('root'))
Move that to App.js file and render App.
App.js
ReactDOM.render(<App/>,document.getElementById('root'))
OR
Add export default in Comp.jsx.
Comp.jsx
import React from 'react'
import ReactDOM from 'react-dom'
// \/ here
export default function MyInfo() {
return (
<div>
<h1>My Name</h1>
<p>This is a Para</p>
</div>
)
}
ReactDOM.render(<MyInfo/>,document.getElementById('root'))
I'm just starting with react.js and create-react-app application so excuse me if this is an obvious question.
My 'src' folder structure is like this:
scr/
....components/
........ComponentA.jsx
........Componentb.jsx
....styles/
........ComponentA.css
....App.css
....App.js
....App.test.js
....index.css
....index.js
...OTHER DEFAULT FILES
In App.js I have this:
import React, { Component } from 'react';
import ComponentA from './components/ComponentA';
class App extends Component {
render() {
return (
<div className="App">
<ComponentA />
</div>
);
}
}
export default App;
In ComponentA I have this:
import React, { Component } from 'react';
import './styles/ComponentA.css';
import ComponentB from './components/ComponentB';
class ComponentA extends Component {
render() {
return (
<div className="componentAStyle">
<ComponentB />
</div>
);
}
}
export default ComponentA;
In ComponentB I have this:
import React, { Component } from 'react';
class ComponentB extends Component {
render() {
return (
<div>
<h1>Hello from ComponentB</h1>
</div>
);
}
}
export default ComponentB;
What I'm trying to do is just import ComponentB from ComponentA and also import the style for ComponentA but all this fall showing the following message:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './styles/ComponentA.css' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
And if I remove the css import there is another error message:
Failed to compile
./src/components/ComponentA.jsx
Module not found: Can't resolve './components/ComponentB' in 'C:\xampp\htdocs\custom-k39\src\components'
This error occurred during the build time and cannot be dismissed.
How can I import another component from another component and its respective css?
Thanks.
You need to make the paths you are importing are relative to the current location of the file doing the import.
The correct imports would be
Component A
import React, { Component } from 'react';
import '../styles/ComponentA.css';
import ComponentB from './ComponentB';
You can see this working at https://glitch.com/edit/#!/trashy-unicorn.
(Click on Show Live in top left hand corner.)
Currently what is happening with your error is
import ComponentB from './components/ComponentB';
is is looking in the path
src/components/components/ComponentB
which does not exist and so gives you an error. Same thing is happening with your styles.
Hope this helps.
I have created a component ChannelSection.jsx which is not the outermost component, App.jsx will be the outermost component. My ChannelSection will need to receive props from its parent component. So added the prop types bellow:
ChannelSection.jsx:
import React, {Component} from 'react';
import ChannelForm from './ChannelForm.jsx';
import ChannelList from './ChannelList.jsx';
class ChannelSection extends Component {
render(){
return (
<div>
<ChannelList {...this.props} />
<ChannelForm {...this.props} />
</div>
)
}
}
ChannelSection.propTypes = {
channels: React.PropTypes.array.isRequired,
setChannel: React.PropTypes.func.isRequired,
addChannel: React.PropTypes.func.isRequired
}
export default ChannelSection
And I am getting this error in the console and I am not sure why and I need some assistance in troubleshooting this:
Uncaught TypeError: Cannot read property 'func' of undefined
My App.jsx file:
import React, {Component} from 'react';
import ChannelSection from './channels/ChannelSection.jsx';
class App extends Component {
constructor(props){
super(props);
this.state = {
channels: []
};
}
addChannel(name){
let {channels} = this.state;
channels.push({id: channels.length, name});
this.setState({channels});
// TODO: Send to Server
}
setChannel(activeChannel){
this.setState({activeChannel});
// TODO: Get Channel Messages
}
render(){
return (
<ChannelSection
channels={this.state.channels}
addChannel={this.addChannel.bind(this)}
setChannel={this.setChannel.bind(this)} />
)
}
}
export default App
my index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
ReactDOM.render(App, document.getElementById('root'));
Ensure you are using React.PropTypes in all cases. It being plural and case both matter.
Update
React.PropTypes is now deprecated. Please use the prop-types npm package which has a default export PropTypes.
Those using PropTypes from the react package, you can use react-codemod to update your project.