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

mna-intend · 2025-01-07T09:58:41Z

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);

The text was updated successfully, but these errors were encountered:

Saifullah-dev · 2025-01-09T21:23:43Z

@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 · 2025-01-10T17:28:27Z

@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 · 2025-01-13T20:21:47Z

@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 · 2025-01-14T08:30:21Z

@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 · 2025-01-14T09:27:04Z

@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.

mna-intend · 2025-01-15T08:57:25Z

@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 · 2025-01-15T09:00:50Z

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

mna-intend · 2025-01-15T10:20:34Z

@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 · 2025-01-15T21:17:40Z

@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.

Saifullah-dev self-assigned this Jan 15, 2025

Saifullah-dev added the invalid This doesn't seem right label Jan 15, 2025

Saifullah-dev added this to react-file-manager development Jan 15, 2025

Saifullah-dev moved this to In Progress in react-file-manager development Jan 15, 2025

Saifullah-dev changed the title ~~Folder in Folder not supported with error~~ [Fix]: Folder in Folder not supported with error Jan 15, 2025

Saifullah-dev changed the title ~~[Fix]: Folder in Folder not supported with error~~ [Fix]: npx create-react-app my-app --template typescript nested folders error Jan 15, 2025

Saifullah-dev changed the title ~~[Fix]: npx create-react-app my-app --template typescript nested folders error~~ [Fix]: npx create-react-app my-app --template typescript Nested Folders Error Jan 15, 2025

Saifullah-dev changed the title ~~[Fix]: npx create-react-app my-app --template typescript Nested Folders Error~~ [FIX]: npx create-react-app my-app --template typescript Nested Folders Error Jan 18, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mna-intend commented Jan 7, 2025 •

edited

Loading

Saifullah-dev commented Jan 9, 2025

mna-intend commented Jan 10, 2025 •

edited

Loading

Saifullah-dev commented Jan 13, 2025 •

edited

Loading

mna-intend commented Jan 14, 2025 •

edited

Loading

mna-intend commented Jan 14, 2025 •

edited

Loading

mna-intend commented Jan 15, 2025 •

edited

Loading

Saifullah-dev commented Jan 15, 2025 •

edited

Loading

mna-intend commented Jan 15, 2025 •

edited

Loading

Saifullah-dev commented Jan 15, 2025

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

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

Comments

mna-intend commented Jan 7, 2025 • edited Loading

Saifullah-dev commented Jan 9, 2025

mna-intend commented Jan 10, 2025 • edited Loading

Saifullah-dev commented Jan 13, 2025 • edited Loading

mna-intend commented Jan 14, 2025 • edited Loading

mna-intend commented Jan 14, 2025 • edited Loading

mna-intend commented Jan 15, 2025 • edited Loading

Saifullah-dev commented Jan 15, 2025 • edited Loading

mna-intend commented Jan 15, 2025 • edited Loading

Saifullah-dev commented Jan 15, 2025

mna-intend commented Jan 7, 2025 •

edited

Loading

mna-intend commented Jan 10, 2025 •

edited

Loading

Saifullah-dev commented Jan 13, 2025 •

edited

Loading

mna-intend commented Jan 14, 2025 •

edited

Loading

mna-intend commented Jan 14, 2025 •

edited

Loading

mna-intend commented Jan 15, 2025 •

edited

Loading

Saifullah-dev commented Jan 15, 2025 •

edited

Loading

mna-intend commented Jan 15, 2025 •

edited

Loading