Error occurs when setting sub folder. Why is that?

[Taekyum]

Hey @Saifullah-dev, thanks a lot for making this beautiful code open-source! It looks gorgeous!

Error occurs when simple code is set as below. Why is that?

  const [files, setFiles] = useState([
    {
      name: "Documents",
      isDirectory: true, // Folder
      path: "/Documents", // Located in Root directory
      updatedAt: "2024-09-09T10:30:00Z", // Last updated time
    },
    {
      name: "Pictures",
      isDirectory: true,
      path: "/Pictures", // Located in Root directory as well
      updatedAt: "2024-09-09T11:00:00Z",
    },
    {
      name: "Pic.png",
      isDirectory: false, // File
      path: "/Pictures/Pic.png", // Located inside the "Pictures" folder
      updatedAt: "2024-09-08T16:45:00Z",
      size: 2048, // File size in bytes (example: 2 KB)
    },
    {
      name: "TEMP",
      isDirectory: true, // Folder
      path: "/Documents/TEMP", // Located inside the "Documents" folder
      updatedAt: "2024-09-08T16:45:00Z",
    },
    {
      name: "Pic.png",
      isDirectory: false, // Folder
      path: "/Documents/TEMP/Pic.png", // Located inside the "TEMP" folder
      updatedAt: "2024-09-08T16:45:00Z",
    },
  ]);

(error message)

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 `Pt`.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[Saifullah-dev]

@Taekyum What react-file-manager version are you on?
Your files state seems to be fine. Can you share your package.json file and import + usage of FileManager component snapshot? Thanks.

[sahlahabteq]

I am using a Next.js TypeScript project. In this project, I am facing an issue with subfolders: it displays an error mentioning the render method Pt:
Unhandled Runtime Error
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 Pt.

Call Stack
createFiberFromTypeAndProps
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (27799:16)
createFiberFromTypeAndProps
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (27828:14)
createFiberFromElement.....

Additionally, soon after uploading a file, it shows an error related to the method Pn:

Unhandled Runtime Error
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 Pn.

Call Stack
createFiberFromTypeAndProps
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (27799:16)
createFiberFromTypeAndProps.....

package.json:
{
"name": "smart-builder-360",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@cubone/react-file-manager": "^1.13.2",
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@hello-pangea/dnd": "^16.5.0",
"@hookform/resolvers": "^3.3.4",
"@iconify/react": "^4.1.1",
"@mui/icons-material": "^5.15.15",
"@mui/lab": "^5.0.0-alpha.165",
"@mui/material": "^5.15.10",
"@mui/material-nextjs": "^5.15.9",
"@mui/x-date-pickers": "^6.19.6",
"@react-oauth/google": "^0.12.1",
"@react-pdf-viewer/core": "^3.12.0",
"@react-pdf-viewer/default-layout": "^3.12.0",
"@react-pdf/font": "^2.5.1",
"@react-pdf/renderer": "^3.4.4",
"@stripe/react-stripe-js": "^2.8.0",
"@stripe/stripe-js": "^4.5.0",
"axios": "^1.6.8",
"dayjs": "^1.11.10",
"dhtmlx-gantt": "^9.0.3",
"gantt-task-react": "^0.3.9",
"next": "14.1.0",
"next-auth": "^4.24.7",
"notistack": "^3.0.1",
"react": "^18",
"react-big-calendar": "^1.13.4",
"react-csv-downloader": "^3.1.1",
"react-dom": "^18",
"react-hook-form": "^7.50.1",
"react-lazy-load-image-component": "^1.6.0",
"react-to-pdf": "^1.0.1",
"uuid": "^9.0.1",
"yup": "^1.3.3"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-big-calendar": "^1.8.9",
"@types/react-dom": "^18",
"@types/react-lazy-load-image-component": "^1.6.3",
"@types/uuid": "^9.0.8",
"typescript": "^5"
}
}
After installing the plugin, I had to create a custom type declaration in the types folder within the src directory.
declare module '@cubone/react-file-manager' {

type File = {
  name: string;
  isDirectory: boolean;
  path: string;
  updatedAt?: string;
  size?: number;
};

interface FileManagerProps {
  acceptedFileTypes?: string;
  enableFilePreview?: boolean;
  filePreviewPath?: string;
  fileUploadConfig?: {
    url: string;
    headers?: { [key: string]: string };
  };
  files: File[];
  height?: string | number;
  initialPath?: string;
  isLoading?: boolean;
  layout?: 'list' | 'grid';
  maxFileSize?: number;
  onCreateFolder?: (name: string, parentFolder: File) => void;
  onDelete?: (files: File[]) => void;
  onDownload?: (files: File[]) => void;
  onError?: (error: { type: string; message: string }, file: File) => void;
  onFileOpen?: (file: File) => void;
  onFileUploaded?: (response: { [key: string]: any }) => void;
  onFileUploading?: (file: File, parentFolder: File) => { [key: string]: any };
  onLayoutChange?: (layout: 'list' | 'grid') => void;
  onPaste?: (
    files: File[],
    destinationFolder: File,
    operationType: 'copy' | 'move'
  ) => void;
  onRefresh?: () => void;
  onRename?: (file: File, newName: string) => void;
  width?: string | number;
}

export const FileManager: React.FC<FileManagerProps>;

}

In the ContractorFileContext file, I have declared a useState variable:
const [contractorFiles, setContractorFiles] = useState<File[]>([]);
Here, I have used the File type, which is imported from @cubone/react-file-manager:
import { File } from "@cubone/react-file-manager";

I have used the FileManager component in my project as part of the @cubone/react-file-manager library. I am passing the required props, such as files, layout, and others, as per the documentation. However, I am encountering an issue where subfolders display an error related to the render method of Pt. Additionally, after uploading a file, an error related to the Pn method occurs.

"use client";

import React, { useEffect, useState } from "react";
import {
Box,
Button,
Container,
Grid,
List,
ListItemIcon,
ListItemText,
Typography,
Modal,
Stack,
ListItemButton,
CircularProgress,
} from "@mui/material";
import { enqueueSnackbar } from "notistack";
import Image from "next/image";
import { DeletePlanBtn } from "./DeletePlanBtn";
import PdfViewer from "./PdfViewer";
import { useContractorFileContext } from "../ContractorFileContext";
import axios from "axios";
import { useSession } from "next-auth/react";
import { useParams } from "next/navigation";
import { useUserPermissionContext } from "@/app/providers/UserPermissionProvider";
import { FileManager,File,FileManagerProps } from "@cubone/react-file-manager";
import "@cubone/react-file-manager/dist/style.css";
// import { ContractorFiles } from "../ContractorFileContext";

const Files: React.FC = () => {
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const { contractorFiles, setContractorFiles,fetchContractorFiles,isLoading,setIsLoading} = useContractorFileContext();
const { data } = useSession();
const params = useParams()
const { isViewOnly } = useUserPermissionContext();
const MAX_TOTAL_SIZE_MB = 30;

const [files, setFiles] = useState([
{
name: "Documents",
isDirectory: true, // Folder
path: "/Documents", // Located in Root directory
updatedAt: "2024-09-09T10:30:00Z", // Last updated time
},
{
name: "Videos",
isDirectory: true, // Folder
path: "/Videos", // Located in Root directory
updatedAt: "2024-09-09T10:30:00Z", // Last updated time
},
{
name: "Pictures",
isDirectory: true,
path: "/Pictures", // Located in Root directory as well
updatedAt: "2024-09-09T11:00:00Z",
},
{
name: "Pic.png",
isDirectory: false, // File
path: "/Pictures/Pic.png", // Located inside the "Pictures" folder
updatedAt: "2024-09-08T16:45:00Z",
size: 2048, // File size in bytes (example: 2 KB)
},
{
name: "Document1",
isDirectory: true, // Folder
path: "/Documents/Document1", // Located in Root directory
updatedAt: "2024-09-09T10:30:00Z", // Last updated time
},
{
name: "Document2",
isDirectory: true, // Folder
path: "/Documents/Document2", // Located in Root directory
updatedAt: "2024-09-09T10:30:00Z", // Last updated time
},
]);

// Function to create a folder on the server and update state
const createFolder = async (name: string, parentFolder: File|null) => {
;
// Prepare the payload
const folderData = {
name,
parentFolder,
};

try {
;
// Make an API request to create the folder
const response = await axios.post(
${process.env.NEXT_PUBLIC_BACKEND_URL}/companies/${data?.user.companyId}/jobs/${params.id}/contractor-file/create-folder,
folderData,
{
headers: {
Authorization: Bearer ${data?.user.access_token},
},
}
);
;
const transformedFolder = {
...response.data.folder,
path: (response.data.folder.path || '')
.replace(/\/g, '/') // Normalize path to use forward slashes
.split('/files')[1] || '', // Get the portion after "/files"
};

// Remove size for directories
if (transformedFolder.isDirectory) {
delete transformedFolder.size;
}

// Update the state with the transformed folder
setContractorFiles((prevFiles) => [
...prevFiles,
transformedFolder, // Add the new folder to the list of files
]);

  enqueueSnackbar('Folder created successfully.', { variant: 'success' });

} catch (error: any) {
if (error?.response?.data?.message) {
const errorMessage = Array.isArray(error?.response?.data?.message)
? error.response?.data?.message[0]
: error?.response?.data?.message;
enqueueSnackbar(errorMessage, { variant: 'error' });
} else {
enqueueSnackbar(error.message, { variant: 'error' });
}
}
};

// Build the uploadConfig dynamically from uploadContractorFile function
const uploadConfig = {
url: ${process.env.NEXT_PUBLIC_BACKEND_URL}/companies/${data?.user.companyId}/jobs/${params.id}/contractor-file,
headers: {
Authorization: Bearer ${data?.user.access_token},
},
};
useEffect(() => {
console.log("CFF",contractorFiles);
// console.log("Files passed to FileManager:", files);

}, [contractorFiles]);

const onFileUpload = (response: File[]) => {
try {

  // Update the contractor files state with the new files
  setContractorFiles((prevFiles: File[]) => [
    ...prevFiles,
    ...uploadedFiles, // Add the new files to the list
  ]);

  enqueueSnackbar('Files uploaded successfully.', { variant: 'success' });
} catch (error: any) {
  enqueueSnackbar(error?.message || 'Error uploading files', { variant: 'error' });
}

};

return (
<Stack
sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
>
{ isLoading ? (
<Box sx={{ display: "flex", justifyContent: "flex-start", alignItems: "center", width:'100%' }}>


): (

{
!isViewOnly &&
<Stack direction="row" spacing={2} sx={{ alignItems: "center",height: '650px', overflow: 'auto',boxSizing:'unset',padding:'20px' }}>
0 ? contractorFiles: []}
fileUploadConfig={uploadConfig}
isLoading={false}
initialPath="/"
onCreateFolder={(name: string, parentFolder: File) => {
console.log("Create Folder:", name, parentFolder);
createFolder(name, parentFolder);
}}
onFileUploaded={(response: any) => {
try {
;
console.log("Raw Uploaded File Response:", response);

            // Parse the response if it's a JSON string
            const parsedResponse = typeof response === "string" ? JSON.parse(response) : response;
        
            console.log("Parsed Uploaded File Response:", parsedResponse);
            let test = {
              name: "Project Estimator (38).pdf",
              path: "/lopj/Project Estimator (38).pdf",
              isDirectory: false,
              updateAt: "2025-01-13T15:46:21.469Z",
              "size": 31902
          }
            console.log("Data before", contractorFiles);
        
            if (Array.isArray(parsedResponse)) {
              setContractorFiles((prevFiles: File[]) => [
                ...prevFiles,
                test, // Append the new files to the state
              ]);

            fetchContractorFiles();
              enqueueSnackbar("Files uploaded successfully.", { variant: "success" });
            } else {
              enqueueSnackbar("Unexpected response format from the server.", { variant: "error" });
            }
          } catch (error) {
            console.error("Error handling uploaded files:", error);
            // enqueueSnackbar(error?.message || "Error uploading files", { variant: "error" });
          }
        }}
          onDelete={(files: any) => {
            console.log("Deleted Files:", files);
          }}
          onFileOpen={(file: any) => {
            console.log("Opened File:", file);
          }}
          onRename={(file: any, newName: any) => {
            console.log("Renamed File:", file, newName);
          }}
          onRefresh={() => {
            console.log("File Manager Refreshed");
          }}
          onError={(error: { type: string; message: string }, file: File) => {
            console.error("Error in FileManager:", error, "File:", file);
        
            // Display error message to the user
            enqueueSnackbar(
              `Error (${error.type}): ${error.message || "An error occurred while processing the file."}`,
              { variant: "error" }
            );
          }}
          onFileUploading={(file: File, parentFolder:File ) => {
            // You can customize the form data here
            console.log("Uploading File:", file);
            console.log("Parent Folder:", parentFolder);
        
            // Return an object to append to the FormData
            return {
              fileName: file.name, 
              parentFolderPath: parentFolder.path, 
            };
          }}

          height="600px"
          width="100%"
          layout="grid"
        />
      </Stack>
    }
  
  </Container>
  )}
</Stack>

);
};

export default Files;

Instead of passing contractorFiles, even if I pass files as data to the component's files prop, the same error occurs.

backend functions:
i.)upload file :
async uploadContractorFiles(files: Array<Express.Multer.File>, user: User, companyId: number, jobId: number, body: ContractorFileDTO) {

    try {
        console.log("ENTERED");
        // Check if User is Admin of the Company.
        if (user.userType == UserTypes.ADMIN || user.userType == UserTypes.BUILDER || user.userType == UserTypes.EMPLOYEE) {
            if (user.userType == UserTypes.BUILDER && user.companyId !== companyId) {
                throw new ForbiddenException("Action Not Allowed");
            }

            // check company exist or not
            const company = await this.databaseService.company.findFirstOrThrow({
                where: {
                    id: companyId
                }
            });

            // check job exist or not
            const job = await this.databaseService.job.findFirstOrThrow({
                where: {
                    id: jobId
                }
            });

            // check customer exist or not
            const customer = await this.databaseService.customer.findFirstOrThrow({
                where: {
                    id: job.customerId
                }
            });
            const { fileName, parentFolderPath } = body;
            console.log("body:", fileName, parentFolderPath);
            // Destination folder dynamically based on params
            const basePath = `uploads/companies/${company.id}/customers/${customer.id}/jobs/${jobId}/files`;

            // Ensure the directory exists, create it if it's not
            await mkdir(basePath, { recursive: true });

            const uploadedFiles = [];

            for (const file of files) {

                // Construct full path for storing the file
                const filePath = normalize(join(basePath, parentFolderPath, file.originalname)).replace(/\\/g, '/');
                console.log(filePath);
                if (await existsSync(filePath)) {
                    throw new ConflictException(`File ${file.originalname} already uploaded.`);
                }
                else {
                    // Write the file to disk
                    await writeFile(filePath, file.buffer);

                    // Check again if file was successfully written
                    if (await existsSync(filePath)) {
                        // after storing file in system create an entry in the database
                        const uploadedFile = await this.databaseService.contractorFiles.create({
                            data: {
                                companyId: company.id,
                                customerId: customer.id,
                                jobId: job.id,
                                fileName: file.originalname,
                                filePath: filePath,
                                size: file.size,
                                isDirectory: false

                            }
                        });

                        uploadedFiles.push({
                            name: uploadedFile.fileName,
                            path: uploadedFile.filePath.replace(/\\/g, '/').split('/files')[1] || '',
                            updateAt: uploadedFile.updatedAt,
                            size: uploadedFile.size
                        });
                    } else {
                        throw new NotFoundException(ResponseMessages.FILE_NOT_UPLOADED);
                    }
                }
            }
            // return { message: 'Folder created successfully.', };
            return (uploadedFiles);



        } else {
            throw new ForbiddenException("Action Not Allowed");
        }

    } catch (error) {
        if (error instanceof PrismaClientKnownRequestError) {
            if (error.code === PrismaErrorCodes.NOT_FOUND) {
                throw new BadRequestException(ResponseMessages.USER_NOT_FOUND);
            } else {
                console.error(error.code);
            }
        } else if (error instanceof ForbiddenException || error instanceof ConflictException || error instanceof NotFoundException) {
            throw error;
        }

        throw new InternalServerErrorException();
    }
}

ii.) fetch files:
async getUploadedFiles(user: User, companyId: number, jobId: number) {
try {
// Check if User is Admin of the Company.
if (user.userType == UserTypes.ADMIN || user.userType == UserTypes.BUILDER || user.userType == UserTypes.EMPLOYEE) {
if (user.userType == UserTypes.BUILDER && user.companyId !== companyId) {
throw new ForbiddenException("Action Not Allowed");
}

            // check company exist or not
            const company = await this.databaseService.company.findFirstOrThrow({
                where: {
                    id: companyId
                }
            });

            // check job exist or not
            const job = await this.databaseService.job.findFirstOrThrow({
                where: {
                    id: jobId
                }
            });

            // check customer exist or not
            const customer = await this.databaseService.customer.findFirstOrThrow({
                where: {
                    id: job.customerId
                }
            });

            // get all files under the company and customer
            const files = await this.databaseService.contractorFiles.findMany({
                where: {
                    companyId: companyId,
                    customerId: job.customerId,
                    jobId: jobId
                }
            });

            return files.map(file => {
                const fileData = {
                    name: file.fileName,
                    path: file.filePath.replace(/\\/g, '/'),
                    isDirectory: file.isDirectory,
                    updateAt: file.updatedAt
                };

                // If it's a directory, remove the size property
                if (!file.isDirectory) {
                    fileData['size'] = file.size;
                }

                return fileData;
            });
        } else {
            throw new ForbiddenException("Action Not Allowed");
        }

    } catch (error) {
        console.log(error);
        throw new InternalServerErrorException();
    }
}

iii.) create folder:

async createFolder(user: User, companyId: number, jobId: number, body: ContractorFolderDTO) {
    try {
        const { name, parentFolder } = body;
        console.log("entered");
        // Check if User is Admin of the Company.
        if (user.userType == UserTypes.ADMIN || user.userType == UserTypes.BUILDER || user.userType == UserTypes.EMPLOYEE) {
            if (user.userType == UserTypes.BUILDER && user.companyId !== companyId) {
                throw new ForbiddenException("Action Not Allowed");
            }

            // check company exist or not
            const company = await this.databaseService.company.findFirstOrThrow({
                where: {
                    id: companyId
                }
            });

            // check job exist or not
            const job = await this.databaseService.job.findFirstOrThrow({
                where: {
                    id: jobId
                }
            });

            // check customer exist or not
            const customer = await this.databaseService.customer.findFirstOrThrow({
                where: {
                    id: job.customerId
                }
            });
            console.log("Customer:", customer);
            console.log("dto", ContractorFolderDTO);
            console.log("Parent Folder:", body.parentFolder);


            // Validate folder name for invalid characters
            const invalidChars = /[<>:"/\\|?*]/;
            if (invalidChars.test(name)) {
                throw new BadRequestException('Folder name contains invalid characters.');
            }
            console.log("PFpath:", parentFolder)
            // Construct the base path and full folder path
            const basePath = `uploads/companies/${companyId}/customers/${customer.id}/jobs/${jobId}/files`;
            const newFolderPath = parentFolder && parentFolder.path && parentFolder.path != null
                ? normalize(join(basePath, parentFolder.path, name)).replace(/\\/g, '/') // Convert to forward slashes
                : normalize(join(basePath, name)).replace(/\\/g, '/'); // Convert to forward slashes

            console.log("path", newFolderPath);


            // Check if the folder path already exists in the database
            const folderExists = await this.databaseService.contractorFiles.findFirst({
                where: {
                    filePath: newFolderPath, // Exact path check
                    companyId: company.id,
                    jobId: job.id,
                    customerId: customer.id,
                    isDirectory: true,
                },
            });

            if (folderExists) {
                throw new ConflictException('Folder exists in the parent folder.');
            }

            // Create the directory on the filesystem
            if (!existsSync(newFolderPath)) {
                await mkdir(newFolderPath, { recursive: true });

                // Add the folder entry to the database
                const newFolder = await this.databaseService.contractorFiles.create({
                    data: {
                        companyId: company.id,
                        customerId: customer.id,
                        jobId: job.id,
                        fileName: name,
                        filePath: newFolderPath,
                        isDirectory: true,
                        size: 0
                    },
                });

                return {
                    message: 'Folder created successfully.',
                    folder: {
                        name: newFolder.fileName,
                        path: newFolder.filePath.replace(/\\/g, '/'),
                        isDirectory: newFolder.isDirectory,
                        size: newFolder.size,
                        updateAt: newFolder.updatedAt
                    },
                };
            } else {
                throw new ConflictException('Folder already exists on the filesystem.');
            }
        }
    } catch (error) {
        console.error(error);
        throw new InternalServerErrorException(
            'An error occurred while creating the folder.',
        );
    }
}

[Saifullah-dev]

@Taekyum , @sahlahabteq The solution of this error has been answered in the Issue npx create-react-app.