So I currently have a page called 'manage.js' in my NextJS app. At the top I have the following:
import React from 'react';
import PaginatedItems from '../components/PaginatedItems'
import TitleHeadline from "../components/ui/TitleHeadline";
import WithdrawModal from "../components/WithdrawModal";
import { FaTimes, FaUndo } from "react-icons/fa";
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
After reading this blog post I thought it would be a good idea to start grouping my imports because they are piling up. I wanted to try it with manage page first to see how it would go. So I created the following in components/pages/manage.js:
export { PaginatedItems } from '../PaginatedItems'
export { TitleHeadline } from '../ui/TitleHeadline';
export { FaTimes, FaUndo } from "react-icons/fa";
export { WithdrawModal } from "../WithdrawModal";
With the aim then of doing this in manage.js:
import { PaginatedItems, TitleHeadline, WithdrawModal, FaTimes, FaUndo } from '../components/pages/manage'
Except it throws all sorts of errors. I dont understand why; the most common error I get is:
Unhandled Runtime 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.
So I tried just importing 'PaginatedItems' from /components/pages/manage.js, but still failed. I changed it to a named export as well:
export PaginatedItems from '../PaginatedItems'
Which PHPStorm seems to like but the page still throws errors. Originally I did use the export * from but that didnt work.
Inside PaginatedItems I have the following:
export default function PaginatedItems(props) {
I feel like i've tried everything, and nothing is working. Any advice?