[Slice Machine] Can't simulate slice using nuxt 3 slicemachine

[cricadev]

Versions

• slice-machine-ui: 1.5.1
• node: 16.14.2 Using Nuxt 3

Reproduction

Additional Details


Steps to reproduce

Setup a project using https://prismic.io/docs/nuxt-3-setup and then run slicemachine and dev server

What is expected?

TO simulate the slice

What is actually happening?

Cross origin because of frame

[mdeclercq]

Hi @cricadev,

Thanks for reporting the issue.

The Blocked a frame from origin error is raised by Nuxt devtools, trying to access the parent frame. I don't think it's the blocking issue as I was able to get Slice Simulator running despite this error.

I have a few questions to get a better understanding of the issue:

1. Can you confirm you executed this step to use Nuxt pages directory?

Nuxt 3 projects come with an app.vue file at the root by default. Create a pages directory, move the app.vue file into that directory, and rename pages/app.vue to pages/index.vue: mkdir pages && mv app.vue pages/index.vue

2. What happens when you try to access the slice simulator page directly on http://localhost:3000/slice-simulator ? It should show this:

Thanks,

[cricadev]

Hi @cricadev,

Thanks for reporting the issue.

The Blocked a frame from origin error is raised by Nuxt devtools, trying to access the parent frame. I don't think it's the blocking issue as I was able to get Slice Simulator running despite this error.

I have a few questions to get a better understanding of the issue:

1. Can you confirm you executed this step to use Nuxt pages directory?

Nuxt 3 projects come with an app.vue file at the root by default. Create a pages directory, move the app.vue file into that directory, and rename pages/app.vue to pages/index.vue: mkdir pages && mv app.vue pages/index.vue

2. What happens when you try to access the slice simulator page directly on http://localhost:3000/slice-simulator ? It should show this:

Thanks,

1. Yes I followed the whole guide.

2. 

[mdeclercq]

Hi @cricadev,

Thanks for your answers, I tried again but could not reproduce the issue. Could you share a minimal reproduction for this issue? Do you have the issue with this Prismic starter: https://github.com/prismicio-community/nuxt-starter-prismic-minimal ?

[mdeclercq]

Hi @cricadev,

I'll close this issue as we couldn't reproduce. If you still encounter the issue of if you reproduce it, could you re-open the issue or open a new one with the details?

Thank you,

[sergiocerrutti]

It is happening to me also, my message copied from Prismic Community Forum: https://community.prismic.io/t/slice-simulator-cors-error/13861

Hi!

I can't use the simulator because of some error while loading the frame. It's a simple Nuxt3 (3.6.0) website, latest SliceMachine UI (1.8.0) working properly, also latest adapter-nuxt (0.3.10). Node.js v20.4.0, on macOS 12.6.7.

npm run dev running in a task, start-slicemachine in other.

Then I click in Simulate button inside a Slice, the simulator page loads successful but the content frame keeps loading until timeout. In the console I can see the following error:

[nuxt] error caught during app initialization DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
    at http://localhost:3000/_nuxt/node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.client.mjs?v=e2b8b243:5:56

EDIT: Okay, looks like Firefox is giving me more information about the issue:

[nuxt] error caught during app initialization DOMException: Permission denied to access property "__NUXT_DEVTOOLS_DISABLE__" on cross-origin object

I've disabled devtools in nuxt.config.ts and it worked! devtools: { enabled: false },

So I guess it would be documented in troubleshooting guide or try to fix this if possible.

Thank you.

[mdeclercq]

Thanks for the details @sergiocerrutti,

Have you changed anything else other than disabling Nuxt devtools? I'm asking because on my side the simulator works despite the cross-origin error. It didn't seem to be blocking.

Anyway I'm re-opening the issue to document this or fix it.

Thanks,

[sergiocerrutti]

Hey @mdeclercq , I just disabled that. Maybe it's something about browser versions? I tried in latest versions of Opera, Chrome and Firefox, same issue and main frame blocked. Other possibility is Node.js version but I don't think if that makes sense, I'm using v20.4.0. Feel free to ask me whatever you need, I can do as many tests as you want.

[comeprismic]

Hi, closing this issue as we released a fixed in v1.12.0 version of Slice Machine.

Feel free to reopen it if it comes again.

Best,