Designer not load in React

[FaizanAqeek]

Describe the bug

simply i call designer constructor in React

import { Designer } from '@pdfme/ui'
import { Template, BLANK_PDF, Mode } from '@pdfme/common'
import { useState } from 'react'

const template: Template = {
    basePdf: BLANK_PDF,
    schemas: [{
        a: {
            type: "text", height: 200, width: 200, position: {
                x: 200,
                y: 400
            },
            readOnlyValue: "text",
            readOnly:true,
            opacity:0.5  
        }
    }],

}

const domContainer = document.getElementById("pdf-designer")!;

export const usePdf = () => {
    const [designer, setDesigner] = useState(new Designer({ template, domContainer }))

    return {
        designer
    }
}

it give me an error

[@pdfme/ui] UnknownErrorException: The `Array.prototype` contains unexpected enumerable properties: max, min; thus breaking e.g. `for...in` iteration of `Array`s.

To Reproduce

simply i call designer constructor in React

import { Designer } from '@pdfme/ui'
import { Template, BLANK_PDF, Mode } from '@pdfme/common'
import { useState } from 'react'

const template: Template = {
    basePdf: BLANK_PDF,
    schemas: [{
        a: {
            type: "text", height: 200, width: 200, position: {
                x: 200,
                y: 400
            },
            readOnlyValue: "text",
            readOnly:true,
            opacity:0.5  
        }
    }],

}

const domContainer = document.getElementById("pdf-designer")!;

export const usePdf = () => {
    const [designer, setDesigner] = useState(new Designer({ template, domContainer }))

    return {
        designer
    }
}

it give me an error

[@pdfme/ui] UnknownErrorException: The `Array.prototype` contains unexpected enumerable properties: max, min; thus breaking e.g. `for...in` iteration of `Array`s.

Expected behavior

it should load the designer UI in React

Your Environment

- pdfme package(@pdfme/generator or @pdfme/ui):@pdfme/ui
- pdfme version:3.2.0
- Operating system: windows 10
- Node.js version or Browser name & version:20.6.1

Your Error Log

[@pdfme/ui] UnknownErrorException: The `Array.prototype` contains unexpected enumerable properties: max, min; thus breaking e.g. `for...in` iteration of `Array`s.

Additional context

No response

[hand-dot]

Wrong usage

export const usePdf = () => {
    const [designer, setDesigner] = useState(new Designer({ template, domContainer }))

    return {
        designer
    }
}

Look: https://github.com/pdfme/pdfme/blob/c9e01db7c0ff05f12bdf7a6be924592c294fcdf4/website/src/pages/template-design.tsx#L63

[FaizanAqeek]

Thank you @hand-dot

[FaizanAqeek]

@hand-dot I Exacly use your example to start designer but i will get an eerror like this

[FaizanAqeek]

import { BLANK_PDF, Template } from '@pdfme/common';
import { text,image, barcodes } from '@pdfme/schemas';
import { Designer } from '@pdfme/ui';
import { useRef, useState } from 'react'

const getSampleTemplate = (): Template => ({
    columns: ['field1', 'field2'],
    sampledata: [
        {
            field1: 'bb',
            field2: 'aaaaaaaaaaaa',
        },
    ],
    basePdf: BLANK_PDF,
    schemas: [
        {
            field1: {
                type: 'text',
                position: { x: 20, y: 20 },
                width: 100,
                height: 15,
                alignment: 'left',
                fontSize: 30,
                characterSpacing: 0,
                lineHeight: 1,
            },
            field2: {
                type: 'image',
                position: { x: 20, y: 35 },
                width: 100,
                height: 40,
            },
        },
    ],
});

const headerHeight = 60;
const controllerHeight = 60;
const ReportDesigner = () => {
    const designerRef = useRef<HTMLDivElement | null>(null);
    const designer = useRef<Designer | null>(null);
    const [template, setTemplate] = useState<Template>(getSampleTemplate());
    const buildDesigner = () => {
        if (designerRef.current) {
            designer.current = new Designer({
                domContainer: designerRef.current,
                template,
                plugins: { text, image, qrcode: barcodes.qrcode },
            });
            // designer.current.onSaveTemplate(downloadTemplate);
            designer.current.onChangeTemplate(setTemplate);
        }
    };
    return (
        <>
            <div
                ref={designerRef}
                style={{ width: '100%', height: `calc(100vh - ${headerHeight + controllerHeight}px)` }}
            />
            <button onClick={buildDesigner} >Start</button>
        </>

    )
}

export default ReportDesigner

[FaizanAqeek]

Package file

"@pdfme/common": "^3.4.0", "@pdfme/generator": "^3.4.0", "@pdfme/schemas": "^3.4.0", "@pdfme/ui": "^3.4.0",

[hand-dot]

You should lean how to write code block at markdown.

Please format your comment.

[hand-dot]

Give me reproducible repo.

[FaizanAqeek]

I format the code for you @hand-dot

[hand-dot]

Okay. But I can't repro

[FaizanAqeek]

Error message "Error: The Array.prototype contains unexpected enumerable properties: max, min; thus breaking e.g. for...in iteration of Arrays." "The Array.prototype contains unexpected enumerable properties: max, min; thus breaking e.g. for...in iteration of Arrays."

which is come from your library when im trying intitaite the designer

[FaizanAqeek]

  "dependencies": {
    "@amcharts/amcharts4": "^4.10.36",
    "@date-io/date-fns": "^2.13.1",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/lab": "^5.0.0-alpha.119",
    "@mui/material": "5.11.16",
    "@mui/styles": "5.11.16",
    "@mui/x-data-grid-pro": "5.12.1",
    "@mui/x-date-pickers-pro": "5.0.0",
    "@pdfme/common": "^3.4.0",
    "@pdfme/generator": "^3.4.0",
    "@pdfme/schemas": "^3.4.0",
    "@pdfme/ui": "^3.4.0",
    "@react-awesome-query-builder/mui": "^6.4.2",
    "@reduxjs/toolkit": "^2.2.1",
    "axios": "^1.6.7",
    "chart.js": "^2.9.4",
    "crypto-js": "^4.0.0",
    "date-fns": "^2.28.0",
    "notistack": "^3.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.22.1",
    "react-window": "^1.8.10",
    "redux": "^5.0.1",
    "secure-web-storage": "^1.0.2",
    "socket.io-client": "^4.7.4",
    "wave-visualizer": "^1.0.6",
    "xlsx": "^0.18.5",
    "xlsx-js-style": "^1.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.0",
    "@typescript-eslint/parser": "^6.7.0",
    "@vitejs/plugin-react-swc": "^3.6.0",
    "eslint": "^8.51.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.3.3",
    "vite": "^5.1.4"
  }

@hand-dot is there is any library that is conflict with yours ?