Frame issue #407

Sahak885 · 2024-04-02T11:13:09Z

Puck Editor (version: 0.14.1)
Stack: Next JS pages router (version: 13.1.2)

Provide environment information

Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 13.1.2
  eslint-config-next: 13.1.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.9.4

When I upgrade Puck Editor to 0.14.1, I encountered this error.

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

chrisvxd · 2024-04-02T12:18:15Z

Hi @Sahak885 - could you please confirm

Your browser
Whether https://demo.puckeditor.com works for you
Whether a production build works

Thanks!

Sahak885 · 2024-04-02T13:06:13Z

Google Chrome 121.0.6167.85
In the demo version, it worked correctly
Build worked

hrachgalstyan · 2024-04-02T13:07:24Z

I encountered the identical problem following the library upgrade too.

hrachgalstyan · 2024-04-02T13:08:56Z

Hi @Sahak885 - could you please confirm

Your browser

Whether https://demo.puckeditor.com works for you

Whether a production build works

Thanks!

Safari 17.2.1
Yes. It work's for me
Yes. Works

HakobjanyanHayk · 2024-04-02T13:12:53Z

Got the same issue

Version 119.0.6045.123 (Official Build) (arm64)
works
works

chrisvxd · 2024-04-02T13:29:38Z

Thanks all! I'm struggling to reproduce. Would someone be able to provide me with a repo that reproduces the issue?

Sahak885 · 2024-04-02T16:12:15Z

chrisvxd · 2024-04-02T16:24:37Z

Thanks @Sahak885 but I'm looking for a code example (GitHub repository) that reproduces the issue so I can debug it.

The error message makes it look like an environment issue, but I'm not sure what's triggering it.

hrachgalstyan · 2024-04-02T19:34:07Z

Thank @chrisvxd for your answer. I can send you our package.json file. You can check versions and try to debug it

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --fix",
    "prepare": "husky",
    "prettier": "prettier --write"
  },
  "lint-staged": {
    "*.{ts,tsx,js,jsx,css}": [
      "prettier --write",
      "eslint"
    ]
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-decoupled-document": "41.1.0",
    "@ckeditor/ckeditor5-react": "6.2.0",
    "@ckeditor/ckeditor5-upload": "^41.1.0",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/sortable": "^8.0.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "@fullcalendar/core": "^6.1.4",
    "@fullcalendar/daygrid": "^6.1.4",
    "@fullcalendar/interaction": "^6.1.1",
    "@fullcalendar/react": "^6.1.4",
    "@fullcalendar/timegrid": "^6.1.1",
    "@headlessui/react": "^1.7.8",
    "@hello-pangea/dnd": "^16.5.0",
    "@leafygreen-ui/icon-button": "^15.0.20",
    "@leafygreen-ui/leafygreen-provider": "^3.1.11",
    "@leafygreen-ui/password-input": "^1.0.17",
    "@mantine/core": "^6.0.2",
    "@mantine/hooks": "^6.0.2",
    "@measured/puck": "^0.14.1",
    "@mui/material": "^5.15.12",
    "@next/font": "13.1.2",
    "@pqina/pintura": "file:local_modules/pintura",
    "@pqina/react-pintura": "^9.0.3",
    "@reduxjs/toolkit": "^1.9.1",
    "@stripe/react-stripe-js": "^2.4.0",
    "@stripe/stripe-js": "^2.4.0",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tippyjs/react": "^4.2.6",
    "@types/file-saver": "^2.0.5",
    "@types/node": "18.11.18",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
    "@uiw/react-markdown-preview": "^4.1.13",
    "@uiw/react-md-editor": "^3.20.10",
    "@vercel/analytics": "^1.0.0",
    "@x1mrdonut1x/nouislider-react": "^3.4.3",
    "apexcharts": "^3.37.1",
    "clsx": "^2.1.0",
    "date-fns": "^2.29.3",
    "easymde": "^2.18.0",
    "eslint-config-next": "13.1.2",
    "file-saver": "^2.0.5",
    "formik": "^2.2.9",
    "highcharts": "^11.3.0",
    "highcharts-react-official": "^3.2.1",
    "highlight.js": "^11.7.0",
    "i18next": "^22.4.10",
    "import": "^0.0.6",
    "jwt-decode": "^4.0.0",
    "lottie-react": "^2.4.0",
    "mantine-datatable": "2.6.5",
    "muuri": "^0.9.5",
    "next": "^13.1.2",
    "next-auth": "^4.22.1",
    "next-remove-imports": "^1.0.11",
    "next-transpile-modules": "^10.0.1",
    "ni18n": "^1.0.5",
    "react": "18.2.0",
    "react-18-image-lightbox": "^5.1.4",
    "react-animate-height": "^3.1.0",
    "react-apexcharts": "^1.4.0",
    "react-click-away-listener": "^2.2.2",
    "react-color": "^2.19.3",
    "react-colorful": "^5.6.1",
    "react-confetti": "^6.1.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-countup": "^6.4.1",
    "react-datetime-picker": "^5.6.0",
    "react-debounce-input": "^3.3.0",
    "react-detect-click-outside": "^1.1.7",
    "react-device-detect": "^2.2.3",
    "react-dom": "18.2.0",
    "react-export-table-to-excel": "^1.0.6",
    "react-flatpickr": "^3.10.13",
    "react-i18next": "^12.1.5",
    "react-images-uploading": "^3.1.7",
    "react-markdown": "^8.0.7",
    "react-perfect-scrollbar": "^1.5.8",
    "react-phone-input-2": "^2.15.1",
    "react-player": "^2.14.1",
    "react-popper": "^2.3.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.22.3",
    "react-select": "^5.7.0",
    "react-shadow-picker": "^1.1.0",
    "react-simplemde-editor": "^5.2.0",
    "react-sortablejs": "^6.1.4",
    "react-spring": "^9.7.1",
    "react-text-mask": "^5.5.0",
    "react-use": "^17.4.0",
    "react-use-measure": "^2.1.1",
    "react-world-flags": "^1.5.1",
    "rehype-sanitize": "^5.0.1",
    "rodal": "^2.1.0",
    "ruuri": "^2.1.0",
    "simple-web-notification": "^2.0.1",
    "socket.io-client": "^4.7.4",
    "sortablejs": "^1.15.0",
    "storybook": "^8.0.0",
    "stripe": "^14.14.0",
    "sweetalert2": "^11.6.13",
    "sweetalert2-react-content": "^5.0.7",
    "swiper": "^8.4.7",
    "typescript": "4.9.4",
    "uuid": "^9.0.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.8",
    "@types/lodash": "^4.14.191",
    "@types/react-color": "^3.0.12",
    "@types/react-copy-to-clipboard": "^5.0.4",
    "@types/react-flatpickr": "^3.8.8",
    "@types/react-text-mask": "^5.4.11",
    "@types/react-world-flags": "^1.4.2",
    "@types/sortablejs": "^1.15.0",
    "autoprefixer": "^10.4.13",
    "eslint": "8.57.0",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
    "postcss": "^8.4.21",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.2.0",
    "tailwindcss": "^3.2.4"
  }
}

hrachgalstyan · 2024-04-02T19:46:40Z

Please also check this link

https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame

Sahak885 · 2024-04-03T07:37:28Z

Hi @chrisvxd, to reproduce the issue, here's an example:

import { loadStripe } from "@stripe/stripe-js"; 

  useEffect(() => {
    loadStripe("key")
      .then(stripe => {
        console.log(stripe, 'stripe')
      })
      .catch(err => {
        console.error(err);
      });
  }, []);

When using this code in the Puck editor component, an error occurred

Sahak885 · 2024-04-03T08:02:21Z

Thanks @Sahak885 but I'm looking for a code example (GitHub repository) that reproduces the issue so I can debug it.

The error message makes it look like an environment issue, but I'm not sure what's triggering it.

Repository: https://github.com/Sahak885/puck-editor-frame-issue

chrisvxd · 2024-04-03T08:22:46Z

Thanks for the reports. I think I know what's going on. Our underlying dnd fork (@measured/dnd) is not discriminating between the Puck iframe and other iframes. The other iframes exist on other origins, which is causing this security issue.

Will patch @measured/dnd.

chrisvxd · 2024-04-03T12:24:24Z

Would someone mind confirming if this is resolved in 0.14.2-canary.03ab0bd?

chrisvxd · 2024-04-03T12:33:59Z

Reopening until fix confirmed

Sahak885 · 2024-04-03T12:34:47Z

chrisvxd · 2024-04-03T12:38:53Z

@Sahak885 looks like a new issue. Again, I cannot reproduce. Can you please provide an example of how to reproduce this new error?

hrachgalstyan · 2024-04-03T12:47:38Z

The same issue

hrachgalstyan · 2024-04-03T12:48:24Z

When I try to open editor I get this error. I think it comes from new iframe functionality

chrisvxd · 2024-04-03T12:49:29Z

@hrachgalstyan that's a new error message, but same as @Sahak885 . The previous one was a security warning.

I could really do with a code example to reproduce, but I'm going to try something else to tighten it up and see if it helps.

hrachgalstyan · 2024-04-03T12:51:02Z

When I am disable iframe it works fine

hrachgalstyan · 2024-04-03T12:52:26Z

@hrachgalstyan that's a new error message, but same as @Sahak885 . The previous one was a security warning.

I could really do with a code example to reproduce, but I'm going to try something else to tighten it up and see if it helps.

The previous one seems to work

chrisvxd · 2024-04-03T12:56:54Z

I've pushed a potential fix and republished again. Please try again in the latest canary 0.14.2-canary.2b2ef32

hrachgalstyan · 2024-04-03T12:59:43Z

I've pushed a potential fix and republished again. Please try again in the latest canary 0.14.2-canary.2b2ef32

Is it the latest version?

chrisvxd · 2024-04-03T13:01:16Z

0.14.2-canary.2b2ef32 is the latest version. You have to explicitly install it (i.e. put 0.14.2-canary.2b2ef32 instead of ^0.14.2-canary.2b2ef32 in your package.json).

hrachgalstyan · 2024-04-03T13:08:33Z

0.14.2-canary.2b2ef32 is the latest version. You have to explicitly install it (i.e. put 0.14.2-canary.2b2ef32 instead of ^0.14.2-canary.2b2ef32 in your package.json).

It loads very hard

https://www.loom.com/share/feb9547ccc80402087ce2d9a100a5850

Sahak885 · 2024-04-11T07:45:09Z

Hi @chrisvxd ,

Repository updated with the following:

Issue with runs slowly: Link to Loom video.
Issue with forced dragging: Link to Loom video.

Regarding the second issue, when I click on items, the system automatically assumes I want to drag them.

Thanks!

chrisvxd · 2024-04-11T12:21:25Z

Thanks @Sahak885. The second issue has been fixed in the latest canary, but I'll dig into the slow load now.

Sahak885 · 2024-04-11T13:29:00Z

Thanks @Sahak885. The second issue has been fixed in the latest canary, but I'll dig into the slow load now.

Is the second issue fixed in this version @measured/puck@0.14.2-canary.e6e01c6?

chrisvxd · 2024-04-11T14:09:09Z

@Sahak885 I believe I've also fixed the slow load issue when dragging the item into the page. Please note, this is different to the issue you reported the other day.

I've tested and it seems to be working in 0.14.2-canary.e529e85. NB when using canaries, you must avoid using ^ in your package.json, i.e.

    "@measured/puck": "0.14.2-canary.e529e85",

Please test the fix and report back if it addresses your remaining issues.

Sahak885 · 2024-04-12T06:50:36Z

@Sahak885 I believe I've also fixed the slow load issue when dragging the item into the page. Please note, this is different to the issue you reported the other day.

I've tested and it seems to be working in 0.14.2-canary.e529e85. NB when using canaries, you must avoid using ^ in your package.json, i.e.
    "@measured/puck": "0.14.2-canary.e529e85",
Please test the fix and report back if it addresses your remaining issues.

Hi @chrisvxd,

Regarding the first issue, it's still running slowly, but you can find the updated video on Loom here.
As for the second issue, the problem with forced dragging has been resolved.

Thanks!

Sahak885 · 2024-04-15T11:24:19Z

Hi @chrisvxd , May I verify the issue? Which version are you referring to?

chrisvxd · 2024-04-15T22:12:22Z

Hi @Sahak885. I believe the latest canary 0.14.2-canary.e585f20 should completely eliminate your slow load issues, however your example repo still encounters significant lag when auto-scrolling. I'm investigating further.

Sahak885 · 2024-04-16T06:44:58Z

Hi @Sahak885. I believe the latest canary 0.14.2-canary.e585f20 should completely eliminate your slow load issues, however your example repo still encounters significant lag when auto-scrolling. I'm investigating further.

In this version, the iframe doesn't show.
Video on Loom here.

chrisvxd · 2024-04-16T07:04:05Z

@Sahak885 😭 any console logs or anything? I'm unable to reproduce that in your example repo.

Kapture.2024-04-16.at.08.03.25.mp4

Sahak885 · 2024-04-16T07:06:42Z

@Sahak885 😭 any console logs or anything? I'm unable to reproduce that in your example repo.

Kapture.2024-04-16.at.08.03.25.mp4

I have updated the repository. Should we pull the changes?

Sahak885 · 2024-04-16T07:08:55Z

Could you please run yarn build and yarn start

Sahak885 · 2024-04-16T07:14:56Z

This issue occurred in production mode. To reproduce:

Run yarn build
Then, run yarn start

chrisvxd · 2024-04-16T07:59:08Z

@Sahak885 no need to pull the changes - they have significant improvements.

Thank you so much for the reproduction steps. I was able to reproduce, and this should be fixed in 0.14.2-canary.717ccb9. Please confirm!

The last thing is the slow auto-scroll (auto-scroll enables the frame to automatically scroll whilst dragging at the edges of the viewport). This is complex to fix, and I think I'll have to completely replace the dnd library to address. An intermediary solution may be to disable auto scrolling for larger payloads.

Sahak885 · 2024-04-16T08:20:52Z

Worked! Thank you so much @chrisvxd.

Sahak885 · 2024-04-16T13:18:38Z

Sometimes the website works fine, but at other times, it doesn't. I'm not sure why, but it occasionally occurs in production mode.
Video on loom here.

Sahak885 · 2024-04-16T13:37:47Z

Sahak885 · 2024-04-16T15:03:40Z

When I hard reload my page and then go to the Puck Editor page, the issue occurs.

Sahak885 · 2024-04-16T15:44:07Z

This issue only occurred in production mode, dev mode worked correctly.

chrisvxd · 2024-04-17T11:52:53Z

@Sahak885 I'm unable to reproduce that in your reproduction repo. Since it's inconsistent, it sounds like it's a cache issue.

Please try a different browser, reinstalling your next modules from scratch and deleting your .next directory.

Sahak885 · 2024-04-17T14:06:42Z

I have done them, but the same issue exists in production after a hard reload page (CTRL + SHIFT + R).

chrisvxd · 2024-04-17T17:18:11Z

@Sahak885 can you reproduce in your https://github.com/Sahak885/puck-editor-frame-issue repo? I am unable to.

Sahak885 · 2024-04-18T13:35:16Z

I don't know why, but that issue occurred when using these two packages in the main repository

import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';

or

import Flatpickr from "react-flatpickr";
import "flatpickr/dist/flatpickr.css";

chrisvxd · 2024-04-19T18:03:54Z

Thanks @Sahak885, I'll investigate further.

chrisvxd · 2024-04-22T09:48:07Z

@Sahak885 I could not reproduce your issues, but I have since published another canary that may help.

Could you test with 0.14.3-canary.73b83ef and let me know if that helps or impacts performance?

chrisvxd mentioned this issue Apr 3, 2024

fix: resolve security warning when additional iframes present #413

Merged

chrisvxd closed this as completed in #413 Apr 3, 2024

chrisvxd reopened this Apr 3, 2024

chrisvxd mentioned this issue Apr 3, 2024

fix: don't query iframe document if not ready #415

Merged

chrisvxd mentioned this issue Apr 11, 2024

perf: don't lock main thread when iframe styles changed #432

Merged

chrisvxd mentioned this issue Apr 12, 2024

perf: batch load initial iframe styles #436

Merged

chrisvxd mentioned this issue Apr 16, 2024

Blocking main thread due to observer measuredco/auto-frame-component#1

Closed

chrisvxd mentioned this issue Apr 16, 2024

chore: load iframe consistently #442

Merged

1 task

chrisvxd mentioned this issue Apr 17, 2024

Slow auto-scroll with iframes and large payloads #444

Open

chrisvxd closed this as completed May 14, 2024

Frame issue #407

Frame issue #407

Comments

Sahak885 commented Apr 2, 2024 • edited

chrisvxd commented Apr 2, 2024

Sahak885 commented Apr 2, 2024

hrachgalstyan commented Apr 2, 2024

hrachgalstyan commented Apr 2, 2024

HakobjanyanHayk commented Apr 2, 2024

chrisvxd commented Apr 2, 2024

Sahak885 commented Apr 2, 2024

chrisvxd commented Apr 2, 2024

hrachgalstyan commented Apr 2, 2024 • edited

hrachgalstyan commented Apr 2, 2024

Sahak885 commented Apr 3, 2024

Sahak885 commented Apr 3, 2024

chrisvxd commented Apr 3, 2024

chrisvxd commented Apr 3, 2024

chrisvxd commented Apr 3, 2024

Sahak885 commented Apr 3, 2024

chrisvxd commented Apr 3, 2024

hrachgalstyan commented Apr 3, 2024

hrachgalstyan commented Apr 3, 2024

chrisvxd commented Apr 3, 2024

hrachgalstyan commented Apr 3, 2024

hrachgalstyan commented Apr 3, 2024

chrisvxd commented Apr 3, 2024 • edited

hrachgalstyan commented Apr 3, 2024

chrisvxd commented Apr 3, 2024

hrachgalstyan commented Apr 3, 2024

Sahak885 commented Apr 11, 2024 • edited

chrisvxd commented Apr 11, 2024

Sahak885 commented Apr 11, 2024

chrisvxd commented Apr 11, 2024

Sahak885 commented Apr 12, 2024

Sahak885 commented Apr 15, 2024

chrisvxd commented Apr 15, 2024

Sahak885 commented Apr 16, 2024 • edited

chrisvxd commented Apr 16, 2024

Sahak885 commented Apr 16, 2024

Sahak885 commented Apr 16, 2024

Sahak885 commented Apr 16, 2024

chrisvxd commented Apr 16, 2024

Sahak885 commented Apr 16, 2024 • edited

Sahak885 commented Apr 16, 2024 • edited

Sahak885 commented Apr 16, 2024

Sahak885 commented Apr 16, 2024

Sahak885 commented Apr 16, 2024 • edited

chrisvxd commented Apr 17, 2024

Sahak885 commented Apr 17, 2024

chrisvxd commented Apr 17, 2024

Sahak885 commented Apr 18, 2024

chrisvxd commented Apr 19, 2024

chrisvxd commented Apr 22, 2024

Sahak885 commented Apr 2, 2024 •

edited

hrachgalstyan commented Apr 2, 2024 •

edited

chrisvxd commented Apr 3, 2024 •

edited

Sahak885 commented Apr 11, 2024 •

edited

Sahak885 commented Apr 16, 2024 •

edited

Sahak885 commented Apr 16, 2024 •

edited

Sahak885 commented Apr 16, 2024 •

edited

Sahak885 commented Apr 16, 2024 •

edited