Collapse component Error

[MrWeit]

Hello, i have spent hours trying to figure this thing out, but I can't waste more time! I have just build a fresh react project and added the following code to App.tsx, after installing all the dependencies.

import React from 'react';
import { BlockManager, BasicType, AdvancedType } from 'easy-email-core';
import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
import { ExtensionProps, StandardLayout } from 'easy-email-extensions';

import 'easy-email-editor/lib/style.css';
import 'easy-email-extensions/lib/style.css';

// theme, If you need to change the theme, you can make a duplicate in https://arco.design/themes/design/1799/setting/base/Color
import '@arco-themes/react-easy-email-theme/css/arco.css';

const initialValues = {
  subject: 'Welcome to Easy-email',
  subTitle: 'Nice to meet you!',
  content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
};

const defaultCategories: ExtensionProps['categories'] = [
  {
    get label() {
      return t('Content');
    },
    active: true,
    blocks: [
      {
        type: AdvancedType.TEXT,
      },
      {
        type: AdvancedType.IMAGE,
        payload: { attributes: { padding: '0px 0px 0px 0px' } },
      },
      {
        type: AdvancedType.BUTTON,
      },
      {
        type: AdvancedType.SOCIAL,
      },
      {
        type: AdvancedType.DIVIDER,
      },
      {
        type: AdvancedType.SPACER,
      },
      {
        type: AdvancedType.HERO,
      },
      {
        type: AdvancedType.WRAPPER,
      },
    ],
  },
  {
    get label() {
      return t('Layout');
    },
    active: true,
    displayType: 'column',
    blocks: [
      {
        get title() {
          return t('2 columns');
        },
        payload: [
          ['50%', '50%'],
          ['33%', '67%'],
          ['67%', '33%'],
          ['25%', '75%'],
          ['75%', '25%'],
        ],
      },
      {
        get title() {
          return t('3 columns');
        },
        payload: [
          ['33.33%', '33.33%', '33.33%'],
          ['25%', '25%', '50%'],
          ['50%', '25%', '25%'],
        ],
      },
      {
        get title() {
          return t('4 columns');
        },
        payload: [['25%', '25%', '25%', '25%']],
      },
    ],
  },
];

export default function App() {

  return (
    <EmailEditorProvider
      data={initialValues}
      height={'calc(100vh - 72px)'}
      autoComplete
      dashed={false}
    >
      {({ values }) => {
        return (
          <StandardLayout
            categories={defaultCategories}
            showSourceCode={true}
          >
            <EmailEditor />
          </StandardLayout>
        );
      }}
    </EmailEditorProvider>
  );
}

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

The issue is the following when i open the page is like this

When when i click the collapse component is shows this error

Also when I reload the page it shows all the collapsed components but after some ms they disappear! Thanks in advance!

[MrWeit]

I think it has something to do with React v18 and arco design @m-Ryan

[m-Ryan]

https://github.com/m-Ryan/easy-email-demo

It is usually caused by compilation. It is recommended that you start with our demo.

[mubin-khalid]

@m-Ryan still happening as of today(Jul-18). Tested it with new setup, loads the editor, but not the content under either of left sidebar or the right, error is exactly same if I try to tweak it a bit and bring the Content collapsable and try to click it.

Code where error is:

var __read$D = globalThis && globalThis.__read || function(o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];var __read$D = globalThis && globalThis.__read || function(o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];

the actual error

packages.json

"dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "easy-email-core": "^4.16.0",
    "easy-email-editor": "^4.16.0",
    "easy-email-extensions": "^4.16.0","easy-email-core": "^4.16.0",
    "easy-email-editor": "^4.16.0",
    "easy-email-extensions": "^4.16.0",
    ...
}
"devDependencies": {
    ...,
    "vite": "^5.3.1",
}

I have also used the demo, nothing is there as well, just blank screen

[m-Ryan]

https://github.com/m-Ryan/easy-email-demo

I've updated the demo version and everything works fine

[mubin-khalid]

yeah, demo works great, but what about the actual package, with React 18?

[MrWeit]

I think the problem is the arco version, should be updated in order to work with React 18!

[m-Ryan]

It doesn’t matter, you can check the code of this repo, it is already React18 https://github.com/zalify/easy-email-editor/blob/master/nextjs-demo/package.json