Cannot access 'Container' before initialization

[nikitakofman]

After going crazy for 10 hours on this problem I am coming for your for help.

My problem is:

Here is my simple custom component from the demo:

import { Element, useNode } from "@craftjs/core";
import React from "react";

import { Button } from "../Button";
import { Container } from "../Container";

export const Custom3BtnDrop = ({ children }) => {
  const {
    connectors: { connect },
  } = useNode();
  return (
    <div ref={connect} className="w-full h-full">
      {children}
    </div>
  );
};

export const Custom3 = (props: any) => {
  return (
    <Container {...props} className="overflow-hidden">
      <div className="w-full mb-4">
        <h2 className="text-center text-xs text-white">
          I must have at least 1 button
        </h2>
      </div>
      <Element canvas is={Custom3BtnDrop} id="wow">
        <Button background={{ r: 184, g: 247, b: 247, a: 1 }} />
      </Element>
    </Container>
  );
};

Custom3.craft = {
  ...Container.craft,
  displayName: "Custom 3",
};

Whenever I display it in my editor, no problem, everything works fine, all the tools, etc..

Now I have a 'displayPage' where people can view their site live, which is this one:

"use client";

import React, { useEffect, useState } from "react";
import { Editor, Frame } from "@craftjs/core";
import { Container, Text } from "./editor-new/selectors";
import { Custom1, OnlyButtons } from "./editor-new/selectors/Custom1";
import { Custom2, Custom2VideoDrop } from "./editor-new/selectors/Custom2";
import {
  Custom3,
  Custom3Live,
  Custom3BtnDrop,
} from "./editor-new/selectors/Custom3";
import { Button } from "./editor-new/selectors/Button";
import { Video } from "./editor-new/selectors/Video";
import { RenderNode } from "./editor-new/editor";
import lz from "lzutf8";
import Custom4 from "./editor-new/selectors/Custom4";
import HeaderComponent from "./editor-new/selectors/Headers/HeaderComponent";
import FooterComponent from "./editor-new/selectors/Footers/footer-1";

const DisplayPage = ({ content }) => {
  const [json, setJson] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const decompressedContent = lz.decompress(lz.decodeBase64(content));
        setJson(decompressedContent);
      } catch (error) {
        console.error("Error decompressing content:", error);
      }
    };

    fetchData();
  }, [content]);

  return (
    <div className="flex items-center justify-center w-full h-full ">
      <Editor
        resolver={{
          Container,
          Text,
          Custom1,
          Custom2,
          Custom2VideoDrop,
          Custom3,
          Custom3BtnDrop,
          OnlyButtons,
          Button,
          Video,
          Custom4,
          HeaderComponent,
          FooterComponent,
        }}
        enabled={false}
        onRender={RenderNode}
      >
        {json && <Frame data={json}></Frame>}
      </Editor>
    </div>
  );
};

export default DisplayPage;

Whenever I open this live site, it now gives me the following error:

Unhandled Runtime Error
ReferenceError: Cannot access 'Container' before initialization

Source
src/components/websites/editor-new/selectors/Custom3/index.tsx (34:6) @ Container

32 |
33 | Custom3.craft = {

34 | ...Container.craft,
| ^
35 | displayName: "Custom 3",
36 | };
37 |

NOTE: If I remove ...Container.craft, the live site works fine but I lose all the tools in the editor.

There must be some work around or maybe it's something I don't understand about Craft JS...

I have tried everything, if a kind soul can help me out on this I would be extremely grateful.

Thank you !

[alihammad99]

If the code works without Container, the issue might be with it.
Could you share the code for Container component please?