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'))
Related
Issue: The import statement on line 1 from App.js imports a component called Box. However, without me implementing the component in App.js, the Box still appears on my screen.
App.js
import Box from './Box';
import React from 'react'
function App() {
return (
<div>
</div>
)
}
export default App;
Box.js
import React from 'react'
function Box() {
return (<div style={{height:'30px', width:'30px', backgroundColor:'black'}}></div>)
}
export default Box;
The output:
I just started learning React but I can't for the life of me figure out how to link a new file to the App.jsx file. I've seen related questions but the setups are all quite different to mine. I used the default Vite template provided (for the most part). I've provided simple snippets of code below.
App.jsx code below:
import React from 'react'
import { useState } from 'react'
import './App.css'
import Pets from './components/Pets'
function App() {
return (
<div className="App">
<Animals/>
</div>
)
}
export default App
The page I'd like to link:
import React from 'react'
function Animals() {
return(
<div>
<h3>Pets for Africa</h3>
<ul>
<li>dogs</li>
<li>cats</li>
</ul>
</div>
)
}
export default Animals
The default main.jsx file which is part of the Vite template
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
Change the default import's name to Animals
import React from 'react'
import { useState } from 'react'
import './App.css'
import Animals from './components/Pets'
function App() {
return (
<div className="App">
<Animals/>
</div>
)
}
export default App
This should work in your case.
Aren't you trying to import file Pets which has name Animals? If yes, simply rename the import Pets from './components/Pets' to import Animals from './components/Animals'
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;
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'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.