[FIX]: npx create-react-app my-app --template typescript Nested Folders Error

[mna-intend]

I need many nested folders in folder, but i doesn't work properly. It gets me this error:
I am using Typescript.

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`.
createFiberFromTypeAndProps@http://localhost:3003/static/js/bundle.js:89860:21
createFiberFromElement@http://localhost:3003/static/js/bundle.js:89881:46
createChild@http://localhost:3003/static/js/bundle.js:76953:54
reconcileChildrenArray@http://localhost:3003/static/js/bundle.js:77193:40
reconcileChildFibers@http://localhost:3003/static/js/bundle.js:77535:20
reconcileChildren@http://localhost:3003/static/js/bundle.js:81962:32
updateFunctionComponent@http://localhost:3003/static/js/bundle.js:82352:24
beginWork@http://localhost:3003/static/js/bundle.js:84046:20
callCallback@http://localhost:3003/static/js/bundle.js:69016:18
invokeGuardedCallbackDev@http://localhost:3003/static/js/bundle.js:69060:20
invokeGuardedCallback@http://localhost:3003/static/js/bundle.js:69117:35
beginWork$1@http://localhost:3003/static/js/bundle.js:89015:32
performUnitOfWork@http://localhost:3003/static/js/bundle.js:88263:16
workLoopSync@http://localhost:3003/static/js/bundle.js:88186:26
renderRootSync@http://localhost:3003/static/js/bundle.js:88159:11
performConcurrentWorkOnRoot@http://localhost:3003/static/js/bundle.js:87554:78
workLoop@http://localhost:3003/static/js/bundle.js:104186:46
flushWork@http://localhost:3003/static/js/bundle.js:104164:18
performWorkUntilDeadline@http://localhost:3003/static/js/bundle.js:104401:25
EventHandlerNonNull*./node_modules/scheduler/cjs/scheduler.development.js/<@http://localhost:3003/static/js/bundle.js:104437:7
./node_modules/scheduler/cjs/scheduler.development.js@http://localhost:3003/static/js/bundle.js:104487:5
options.factory@http://localhost:3003/static/js/bundle.js:640824:31
__webpack_require__@http://localhost:3003/static/js/bundle.js:640246:32
fn@http://localhost:3003/static/js/bundle.js:640483:21
./node_modules/scheduler/index.js@http://localhost:3003/static/js/bundle.js:104502:20
options.factory@http://localhost:3003/static/js/bundle.js:640824:31
__webpack_require__@http://localhost:3003/static/js/bundle.js:640246:32
fn@http://localhost:3003/static/js/bundle.js:640483:21
./node_modules/react-dom/cjs/react-dom.development.js/<@http://localhost:3003/static/js/bundle.js:65314:40
./node_modules/react-dom/cjs/react-dom.development.js@http://localhost:3003/static/js/bundle.js:91073:5
options.factory@http://localhost:3003/static/js/bundle.js:640824:31
__webpack_require__@http://localhost:3003/static/js/bundle.js:640246:32
fn@http://localhost:3003/static/js/bundle.js:640483:21
./node_modules/react-dom/index.js@http://localhost:3003/static/js/bundle.js:91144:20
options.factory@http://localhost:3003/static/js/bundle.js:640824:31
__webpack_require__@http://localhost:3003/static/js/bundle.js:640246:32
fn@http://localhost:3003/static/js/bundle.js:640483:21
./node_modules/react-dom/client.js@http://localhost:3003/static/js/bundle.js:91087:28
options.factory@http://localhost:3003/static/js/bundle.js:640824:31
__webpack_require__@http://localhost:3003/static/js/bundle.js:640246:32
fn@http://localhost:3003/static/js/bundle.js:640483:21
./src/index.tsx@http://localhost:3003/static/js/bundle.js:13586:93
options.factory@http://localhost:3003/static/js/bundle.js:640824:31
__webpack_require__@http://localhost:3003/static/js/bundle.js:640246:32
@http://localhost:3003/static/js/bundle.js:641403:56
@http://localhost:3003/static/js/bundle.js:641405:12

const test1: File =
  {
      isDirectory: true,
      name: "folder1",
      path: "/folder1",
      size: 0,
      updatedAt: "2025-01-07T08:42:48.333Z"
  };
formattedFiles.push(test1);

const test: File =
  {
      isDirectory: true,
      name: "folder2",
      path: "/folder1/folder2",
      size: 0,
      updatedAt: "2025-01-07T08:42:48.333Z"
  };
formattedFiles.push(test);

const test3: File =
  {
      isDirectory: false,
      name: "t.png",
      path: "/folder1/folder2/t.png",
      size: 0,
      updatedAt: "2025-01-07T08:42:48.333Z"
  };
formattedFiles.push(test3);

[Saifullah-dev]

@mna-intend could you please share full code snippet so that I may debug the issue here. Also, what React version are you on ?

[mna-intend]

@Saifullah-dev

"react": "^18.3.0"
"typescript": "^4.9.5"

here is the code:

cubone__react-file-manager.d.ts

declare module '@cubone/react-file-manager' {
    interface File {
        name: string;
        isDirectory: boolean;
        path: string;
        updatedAt: string;
        size?: number;
    }

    interface FileManagerProps {
        files: File[];
        filePreviewPath?: string;
        enableFilePreview?: boolean;
        onDownload?: (files: File[]) => void;
        onFileOpen?: (file: File) => void;
    }

    export const FileManager: React.FC<FileManagerProps>;
}

FileStorageViewComponent.tsx

import React, {useState, useEffect} from 'react';
import {FileManager, File} from '@cubone/react-file-manager';
import '@cubone/react-file-manager/dist/style.css';
import {settings} from '../../../base/config/config';


interface FileStorageViewComponentProps {
    storageId: string;
    storagePath?: string;
}

const FileStorageViewComponent: React.FC<FileStorageViewComponentProps> = ({storageId, storagePath = '/'}) => {
    const [files, setFiles] = useState<File[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchFiles = async () => {
            try {

                const formattedFiles: File[] = [];

                const test1: File =
                    {
                        isDirectory: true,
                        name: "folder1",
                        path: "/folder1",
                        size: 0,
                        updatedAt: "2025-01-07T08:42:48.333Z"
                    };
                formattedFiles.push(test1);

                const test: File =
                    {
                        isDirectory: true,
                        name: "folder2",
                        path: "/folder1/folder2",
                        size: 0,
                        updatedAt: "2025-01-07T08:42:48.333Z"
                    };
                formattedFiles.push(test);

                const test3: File =
                    {
                        isDirectory: false,
                        name: "t.png",
                        path: "/folder1/folder2/t.png",
                        size: 0,
                        updatedAt: "2025-01-07T08:42:48.333Z"
                    };
                formattedFiles.push(test3);
                setFiles(formattedFiles);
                console.log('Formatted files:', formattedFiles);

            } catch (error) {
                console.error('Failed to fetch files:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchFiles();
    }, [storageId, storagePath]);

    const handleDownload = async (files: File[]) => {

    };

    const handleFileOpen = (file: File) => {
    };

    return (
        <div>
            {loading ?
                <p>Loading...</p> :
                <FileManager
                    files={files}
                    filePreviewPath={settings.url}
                    enableFilePreview={false}
                    onDownload={handleDownload}
                    onFileOpen={handleFileOpen}
                />
            }
        </div>
    );
};

export default FileStorageViewComponent;

[Saifullah-dev]

@mna-intend I just tested your provided code and it's working fine. I'm using create vite@latest.
I Placed the cubone__react-file-manager.d.ts file in the src folder.
Verify your file manager type declaration location.

VID_20250114_011903.mp4

App.tsx

import React, { useState, useEffect } from 'react';
import { FileManager, File } from '@cubone/react-file-manager';
import '@cubone/react-file-manager/dist/style.css';


interface FileStorageViewComponentProps {
  storageId?: string;
  storagePath?: string;
}

const FileStorageViewComponent: React.FC<FileStorageViewComponentProps> = ({ storageId = '', storagePath = '/' }) => {
  const [files, setFiles] = useState<File[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchFiles = async () => {
      try {

        const formattedFiles: File[] = [];

        const test1: File =
        {
          isDirectory: true,
          name: "folder1",
          path: "/folder1",
          size: 0,
          updatedAt: "2025-01-07T08:42:48.333Z"
        };
        formattedFiles.push(test1);

        const test: File =
        {
          isDirectory: true,
          name: "folder2",
          path: "/folder1/folder2",
          size: 0,
          updatedAt: "2025-01-07T08:42:48.333Z"
        };
        formattedFiles.push(test);

        const test3: File =
        {
          isDirectory: false,
          name: "t.png",
          path: "/folder1/folder2/t.png",
          size: 0,
          updatedAt: "2025-01-07T08:42:48.333Z"
        };
        formattedFiles.push(test3);
        setFiles(formattedFiles);
        console.log('Formatted files:', formattedFiles);

      } catch (error) {
        console.error('Failed to fetch files:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchFiles();
  }, [storageId, storagePath]);

  const handleDownload = async (files: File[]) => {

  };

  const handleFileOpen = (file: File) => {
  };

  return (
    <div>
      {loading ?
        <p>Loading...</p> :
        <FileManager
          files={files}
          enableFilePreview={false}
          onDownload={handleDownload}
          onFileOpen={handleFileOpen}
        />
      }
    </div>
  );
};

export default FileStorageViewComponent;

cubone__react-file-manager.d.ts

declare module '@cubone/react-file-manager' {
  interface File {
    name: string;
    isDirectory: boolean;
    path: string;
    updatedAt: string;
    size?: number;
  }

  interface FileManagerProps {
    files: File[];
    filePreviewPath?: string;
    enableFilePreview?: boolean;
    onDownload?: (files: File[]) => void;
    onFileOpen?: (file: File) => void;
  }

  export const FileManager: React.FC<FileManagerProps>;
}

[mna-intend]

@Saifullah-dev I placed it in the same folder as my FileStorageViewComponent and also tried it directly in /src, but still the same error. Im investigating.

The 'npm i --save-dev @types/cubone__react-file-manager' throws a http 404 error.

[mna-intend]

@Saifullah-dev here is a more detailed error message from my project.

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.
at createFiberFromTypeAndProps (http://localhost:3003/static/js/bundle.js:90005:21)
at createFiberFromElement (http://localhost:3003/static/js/bundle.js:90026:19)
at createChild (http://localhost:3003/static/js/bundle.js:77098:32)
at reconcileChildrenArray (http://localhost:3003/static/js/bundle.js:77338:29)
at reconcileChildFibers (http://localhost:3003/static/js/bundle.js:77680:20)
at reconcileChildren (http://localhost:3003/static/js/bundle.js:82100:32)
at mountIndeterminateComponent (http://localhost:3003/static/js/bundle.js:82944:9)
at beginWork (http://localhost:3003/static/js/bundle.js:84179:20)
at beginWork$1 (http://localhost:3003/static/js/bundle.js:89138:18)
at performUnitOfWork (http://localhost:3003/static/js/bundle.js:88408:16)

[mna-intend]

@Saifullah-dev After a day of debugging i still can't find the real problem. Your application uses something of Fiber, which may causes this problem. I tried ur create vite@latest and it worked in this example, but not for mine project.

I created a default project with npx create-react-app my-app --template typescript, beacause i don't use vite. Same App.tsx from above and finally i can show you the error. I uploaded it to debug for you in my repository here:

react-file-manager-error

[Saifullah-dev]

@mna-intend I haven't t tried it with create- react-app. Will debug it and let you know. Thanks.

[mna-intend]

@Saifullah-dev Thank you for your patience. Here is the simple repository with the error and my packages i use: react-file-manager-error

[Saifullah-dev]

@Saifullah-dev I placed it in the same folder as my FileStorageViewComponent and also tried it directly in /src, but still the same error. Im investigating.

The 'npm i --save-dev @types/cubone__react-file-manager' throws a http 404 error.

You're getting http 404 error because React File Manager currently doesn't have TypeScript support. I'm planning on providing TS support in the upcoming releases. In the meantime, you may use cubone__react-file-manager.d.ts type declaration as shown above.

PS. I'm troubleshooting npx create-react-app my-app --template typescript issue with the sub folders. Will notify you when fixed. Thanks.