I can't show data via data attribute

[EdKo2001]

import { Editor, Frame, Element } from "@craftjs/core";
import { Container } from "../components/selectors";
import { NextPageContext } from "next";

const Page = (props) => {
  return (
    <div>
      <h2>My App!</h2>
      <Editor
        resolver={{
          Container,
        }}
      >
        <h2>My Page Editor</h2>
        <Frame data={props?.formattedData}>
          {/* <Frame> */}
          <Element is={Container} canvas>
            // defines the Root Node
            <h2>Drag me around</h2>
            <Element is="div" style={{ background: "#333" }}>
              <p>Same here</p>
            </Element>
          </Element>
        </Frame>
      </Editor>
    </div>
  );
};

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const data = await import("../data/example.json");
  const formattedData = JSON.stringify(data);

  // Pass data to the page via props
  return { props: { formattedData } };
}

export default Page;

The error:

P.S. I've tried as JSON file from crast.js example and from saving my examples.

Your environment

Software	Version(s)
craft.js	0.2.0-beta.2
React	17.0.2
TypeScript	3.7.5
Browser
npm/Yarn	8.3.0
Operating System	Win 10

[EdKo2001]

any news so far?

[ankri]

Could you please create a reproducible example with codesandbox or please console.log the props.formattedData to have a a look?

[EdKo2001]

Sure, I'll do it shorty and send it here.
Thank you for your response.

[EdKo2001]

@ankri hello, I couldn't reproduce in the codesandbox just run into other issues, so just pushed to github.
Here we go: https://github.com/EdKo2001/craft
Then you visit that link - http://localhost:3001/page and find the described issue.
Thank you in advance.

[ankri]

Hey @EdKo2001 - I found your problem. It's the way you import the json. I created a codesandbox for you.

The problem is by importing the json via import: const data = await import("../data/example.json"); they also add a default attribute.

You can fix it by changing this line:

  const data = await import("../data/example.json");
-  const formattedData = JSON.stringify(data);
+  const formattedData = JSON.stringify(data.default);

---

btw: if you have a GitHub repo you can just import the repo as a codesandbox. pretty handy

[EdKo2001]

Wow, thank you a lot man!