I am getting 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.Check the render method of
Page.
This is my code:
My app/dashboard/page.tsx
"use client";
import "yet-another-react-lightbox/styles.css";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
import { useEffect, useState } from "react";
import Counter from "yet-another-react-lightbox/plugins/counter";
import { CustomImage } from "./images";
import Download from "yet-another-react-lightbox/plugins/download";
import { Gallery } from "react-grid-gallery";
import Lightbox from "yet-another-react-lightbox";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import axios from "axios";
export default function Page({ token }: { token: string }) {
const [indexP1, setIndexP1] = useState(-1);
const [imagesP1, setImagesP1] = useState([]);
const [indexP2, setIndexP2] = useState(-1);
const [imagesP2, setImagesP2] = useState([]);
useEffect(() => {
axios.post('http://localhost:4000/v1/downloads/collection', { bucket:"ljstills.marionetadrien", path:"lespreparatifs/"}).then(function(resp) {
setImagesP1(resp.data);
}).catch(function(err) {
console.log('get lesPreparatifs failed', err);
});
axios.post('http://localhost:4000/v1/downloads/collection', { bucket:"ljstills.marionetadrien", path:"lamairie/"}).then(function(resp) {
setImagesP2(resp.data);
}).catch(function(err) {
console.log('get laMairie failed', err);
});
}, []);
const handleClickP1 = (index: number, item: CustomImage) => setIndexP1(index);
const handleClickP2 = (index: number, item: CustomImage) => setIndexP2(index);
const slidesP1 = imagesP1.map(({ original, preview, thumbnail, width, height }) => ({
src: preview,
width,
height,
}));
const slidesP2 = imagesP2.map(({ original, preview, thumbnail, width, height }) => ({
src: preview,
width,
height,
}));
return (
<div>
<Tabs defaultValue="les-preparatifs">
<TabsList>
<TabsTrigger value="les-preparatifs">Les préparatifs</TabsTrigger>
<TabsTrigger value="la-mairie">La mairie</TabsTrigger>
</TabsList>
<TabsContent value="les-preparatifs">
<Gallery
images={imagesP1}
onClick={handleClickP1}
/>
<Lightbox
slides={slidesP1}
open={indexP1 >= 0}
index={indexP1}
close={() => setIndexP1(-1)}
plugins={[Counter, Download, Slideshow]}
/>
</TabsContent>
<TabsContent value="la-mairie">
<Gallery
images={imagesP2}
onClick={handleClickP2}
/>
<Lightbox
slides={slidesP2}
open={indexP2 >= 0}
index={indexP2}
close={() => setIndexP2(-1)}
plugins={[Counter, Download, Slideshow]}
/>
</TabsContent>
</Tabs>
</div>
);
}
And my app/layout.tsx:
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
import Modal from './ui/modal';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
<Modal/>
</html>
);
}