Local development not working, empty iframe

enuchi / React-Google-Apps-Script

This is your boilerplate project for developing React apps inside Google Sheets, Docs, Forms and Slides projects. It's perfect for personal projects and for publishing complex add-ons in the Google Workspace Marketplace.

MIT License

1.34k stars 178 forks source link

Local development not working, empty iframe #158

Closed apugoneappu closed 1 year ago

apugoneappu commented 1 year ago

When I run, npm run start, the sidebar and modals are all empty. However, it's fine with 'npm run deploy'. I've checked that the iframe has the correct URL (https://localhost:3000/dialog-demo-tailwindcss-impl.html) and that it is being served correctly (opening normally when visiting the webpage directly in new tab).

enuchi commented 1 year ago

Sure -- couple questions to try to sort it out

What platform are you using?
Is this a fresh clone or have you modified any files?
Assume you've set up the certs correctly as in the docs https://github.com/enuchi/React-Google-Apps-Script#-new-local-development-
Any errors in the console?

apugoneappu commented 1 year ago

What platform are you using?

Using : macOS Ventura 13.0.1 (22A400) node v14.17.4 npm 7.20.3

Is this a fresh clone or have you modified any files?

Fresh clone

Assume you've set up the certs correctly as in the docs https://github.com/enuchi/React-Google-Apps-Script#-new-local-development-

Yep, this was the output of npm run setup:https:

> react-google-apps-script@2.1.0 setup:https
> mkdirp certs && mkcert -key-file ./certs/key.pem -cert-file ./certs/cert.pem localhost 127.0.0.1

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"

The certificate is at "./certs/cert.pem" and the key at "./certs/key.pem" ✅

It will expire on 27 February 2025 🗓

Any errors in the console?

Screenshot 2022-11-27 at 2 04 13 AM

enuchi commented 1 year ago

Hmm really not sure. If you're able to load the page https://localhost:3000/dialog-demo-tailwindcss-impl.html in a new tab then it should also work when loading from the iframe, which you said you confirmed is showing the right src url.

Your console looks similar to mine but missing the logs from when webpack compiles. Yours also has a bunch of chrome extension failures. Try disabling your extensions? Try from safari or another browser?
I can also change the src url in the iframe element to src="", see a white screen, and then change back to src="https://localhost:3000/dialog-demo-tailwindcss-impl.html" and it will immediately reload the page normally. If this is not happening and you've confirmed you're able to load https://localhost:3000/dialog-demo-tailwindcss-impl.html in a new tab then something in your browser is blocking that iframe from loading the content.

apugoneappu commented 1 year ago

"you've confirmed you're able to load https://localhost:3000/dialog-demo-tailwindcss-impl.html in a new tab then something in your browser is blocking that iframe from loading the content" was spot on!

I was using Brave browser, disabled Brave Shields for Spreadsheets and it started working! Thanks a lot!!