When I import { collection, getDocs } from "firebase/firestore"; I get this error:
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, or you might have mixed up default and named imports.
I have nothing inside my function component and only a <div>hello</div> in JSX.
Edit: The component in project-name/components/Header/index.js
import { collection, getDocs } from "firebase/firestore";
const Header = () => {
return (
<div>hello</div>
);
};
export default Header;
Called in pages/index.js
import Head from "next/head";
import Header from "../components/Header";
export default function Home() {
return (
<div>
<Head>
<title>Site Name</title>
<meta name="description" content="made by..." />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<Header />
</main>
</div>
);
}
Firebase install: npm i firebase
It works when I import the component: ../components/Header/index, but I get same error when I import the component in a Layout:
import Header from './Header/index'
const Layout = ({children}) => {
return (
<div>
<Header />
<div>{children}</div>
</div>
)
}
export default Layout
Related
I am using nx workspace for build the react ts app.
here is the lib component:
import { ReactElement } from 'react';
import styles from './header-public.module.scss';
export function HeaderPublic(): ReactElement {
return (
<div className={styles['container']}>
<h1>Welcome to HeaderPublic!</h1>
</div>
);
}
export default HeaderPublic;
here is the layout component:
import * as HeaderPublic from '#stonehenge/header-public';
import { ReactElement } from 'react';
import layoutStyle from './layout-public.module.scss';
export function LayoutPublic({ children }: { children: ReactElement }) {
return (
<section className={layoutStyle['app-wrapper']}>
<header className="app-header">
<HeaderPublic></HeaderPublic>//error
</header>
<main className="app-main">{children}</main>
<footer className="app-footer"></footer>
</section>
);
}
export default LayoutPublic;
getting error at header component as:
JSX element type 'HeaderPublic' does not have any construct or call signatures.ts(2604)
<main className="app-main">{children}</main> works. but header throw error. any one help me?
I imported the component like this:
import { HeaderPublic } from '#stonehenge/header-public'; instead of
import * as HeaderPublic from '#stonehenge/header-public'; now works fine.
I've faced with an error
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, or you might have mixed up default and named imports.
Check the render method of ContactUsPage.
during testing like
import { render, screen } from '#testing-library/react'
import ContactUsPage from '../pages/contact-us'
import React from 'react'
describe('Contact page', () => {
it('renders a heading', () => {
render(<ContactUsPage />)
const heading = screen.getByRole('heading', {
name: /Let’s work together/i,
})
expect(heading).toBeInTheDocument()
})
})
I have no idea why and I'd appreciate for any help here
If I try to render not the next.js page but the inside component only, I receive the same error for inner components. Like in Header component I have
import { Row, useScreenClass } from 'react-grid-system'
Despite it is uncomfortable, I can change all destructure imports to defaults but with 3d-party libraries, there is no opportunity to do the same.
import ContactUs from 'routes/ContactUs'
import React from 'react'
import MetaTags from 'components/MetaTags/MetaTags'
const ContactUsPage = () => {
return (
<>
<MetaTags title='Contact us' />
<ContactUs />
</>
)
}
export default ContactUsPage
//ContactUs.jsx
import React from 'react'
import PageLayout from 'ui-kit/Layout/PageLayout'
import Section from 'ui-kit/Layout/Section'
import ContentContainer from './ContentContainer'
import HeaderHero from './HeaderHero'
import Waves from 'components/Waves/Waves'
import styles from './ContactUs.module.scss'
import violetBottomWave from 'images/waves/contact-right-bottom-wave.svg'
import topWaveDesktop from 'images/waves/contact-top-wave.svg'
const ContactUs = () => (
<PageLayout
greyBackground={false}
headerHero={<HeaderHero />}
withWaves={false}
wrapperClassName='page--about-us'
>
<Waves
className={`${styles.topWaveDesktop} z-index-max`}
src={topWaveDesktop}
/>
<Section className={styles.contactUsSection} fullWidth>
<ContentContainer />
</Section>
<div className={styles.contactUsMapWaves}>
<Waves
className={`${styles.waveBlue} z-index-max`}
src={violetBottomWave}
/>
</div>
</PageLayout>
)
export default ContactUs
I am new in react js and trying to learn how the array works with a component using map function but I got this error recently and I don't have any idea what it is and how to solve it
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of App.
Here is my code
**
Mapfun.jsx
**
import React from 'react';
import Card from './Cards';
import Sdata from './Sdata';
const Mapfun=Sdata.map((val)=>{
return(
<Card
key={val.id}
imgsrc={val.imgsrc}
title={val.title}
sname={val.sname}
link= {val.link}
/>
);
});
export default Mapfun;
**
Sdata.jsx
**
const Sdata=[
{
id:1,
imgsrc:'https://wallpapercave.com/wp/wp1917154.jpg',
title:'Netflix original Series One',
sname: 'Stranger Things',
link:'https://www.netflix.com/in/'
},
{
id:2,
imgsrc:'https://wallpapercave.com/wp/wp4056410.jpg',
title:'Netflix original Series Two',
sname: 'Dark',
link:'https://www.netflix.com/in/'
},
{
id:3,
imgsrc:'https://images.justwatch.com/poster/8589251/s592',
title:'Netflix original Series Three',
sname: 'The Vampire Diaries',
link:'https://www.netflix.com/in/'
},
]
export default Sdata;
**
Cards.jsx
**
import React from 'react';
function Card(props){
return(
<>
<div className="cards">
<div className="card">
<img src={props.imgsrc} alt="mypic" className="card_img"/>
<div className="card_info">
<mark>
<span className="card_category">{props.sname}</span></mark>
<h3 className="card_title">{props.title}</h3>
<a href={props.link} target="_blank">
<button>Watch Now</button>
</a>
</div>
</div>
</div>
</>
)
};
export default Card;
**
App.jsx
**
import Mapfun from './Mapfun';
function App(){
return(
<>
<Card/>
<Mapfun/>
</>
)
}
export default App;
**
index.js
**
import React from 'react';
import ReactDom from 'react-dom';
import './index.css';
import App from './App';
ReactDom.render(
<App/>,
document.getElementById('root')
);
Your MapFun isn't a component, it's an array, so it can't be instantiated as a React component.
You can render as an array:
<Card />
{Mapfun}
Or you can convert it to a React component. In this case a function component that takes no props object and renders an array.
const Mapfun = () =>
Sdata.map((val) => {
return (
<Card
key={val.id}
imgsrc={val.imgsrc}
title={val.title}
sname={val.sname}
link={val.link}
/>
);
});
...
<Card />
<Mapfun />
The following code gives an error when I visit the page this component is rendered on:
import React from 'react'
import Layout from '../components/layout'
import SEO from '../components/seo'
import {
Divider,
Card,
Link,
} from '#blueprintjs/core'
const TagPage = ({ pageContext }) => {
const { name, description, tagsCount, questions, } = pageContext
return (
<Layout>
<SEO title={name} description={description} />
<h1>{name}</h1>
<p>{description}</p>
<Divider />
<br/><br/>
{questions.map((q) => {
return (
<>
<Link
to={`tagsQuestion-${q.id}`}
style={{
color: `inherit`,
textDecoration: `none`,
}}
>
<Card interactive='true'>
<p>{q.id}</p>
<p>{q.prompt}</p>
</Card>
</Link>
<br/>
</>
)
})}
</Layout>
)
}
export default TagPage
However if I change:
<Link to={`/question/${q.id}`}>...</Link>
into
<a href={`/question/${q.id}`} >...</a>
then the page will render and be useable without any errors.
This is the current error message I am getting:
(AppContainer, in main (at layout.js:33)) 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, or you might have mixed up default and named imports. Check the render method of `TagPage
Question:
Why can I not use the Link component in this situation?
Info:
questions is an array
TagPage is a page created in gatsby-node.js
Thanks you, for your time, feel free to ask questions as needed.
replace
import {
Divider,
Card,
Link,
} from '#blueprintjs/core'
with
import { Link } from 'gatsby'
import {
Divider,
Card,
} from '#blueprintjs/core'
Hi I'm trying to use Context API and this is my code
App.js
import {Provider} from './components/contexApi/context';
class App extends Component {
render() {
return (
<Provider>
<div className="App">
<Header />
<TodoList />
</div>
</Provider>
);
}
}
And this is my context.js file
context.js
import React, { Component } from 'react'
const Context = React.createContext;
export class Provider extends Component {
state = {
}
render() {
return (
<Context.Provider value={this.state}>
{this.props.children}
</Context.Provider>
)
}
}
export const Consumer = Context.Consumer;
After I save the file the main page says:
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, or you might have mixed up default and named imports.
Check the render method of Provider.
React.createContext is a function and you are not calling it.
https://reactjs.org/docs/context.html#reactcreatecontext