Open adim1973 opened 11 months ago
Hi there, not sure I can help you. I'm not familiar with that extension but it could be doing a number of things that block the add-on from loading, such as interfering with loading iframes to loading react in a way that conflicts with this project.
I'm not sure what's happening, the iframe seems to load fine but the content is not rendered.
Again this seems to be a issue with your other extension. Did you try asking them about this error?
A few things I'd try to narrow it down:
Thank you for replying!
Hmm maybe you could try not externalizing react and react-dom in production by modifying webpack.config.js.
Find the section below and remove !isProd &&
?
// don't externalize react during development due to issue with react-refresh
// https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/334
if (!isProd && packageName === 'react') {
return null;
}
Nope, same result. The problematic extension needs to be installed only, no login/configuration on it. The issue happens on other browsers too, is not a Chrome thing. (I tried Edge/Windows 11).
Hi @enuchi,
I dug more into this and I have some more info, would really appreciate if you can take a look and share your thoughts. Here are a screenshot with my add-in (built on top of the boilerplate), which is not loading the react content (only the test html text) and a screenshot with a working google sheets add-on, which is working fine. Both screenshots are taken with the problematic chrome add-on enabled.
I notice three differences:
react/react-dom
script declarations in the head
section (my add-on in body
)react/react-dom
script declarations as script crossorigin src
while my add-on is just script src
Not sure if any of these differences I noticed may lead to the issue, that's why I would love your opinion.
My add-on (not working)
Working add-on
I'd stick to testing with the provided sidebar app since it is a good minimal example. Looks like your app loads other libraries.
if (packageName === 'react' || packageName === 'react-dom') {
return null;
}
I added the non externalizing react/react-dom code.
But can't see anything obvious difference with the problematic add-on turned on/off.
Elements bad
Elements ok
Console bad
Console ok
Network bad
Network ok
Downgrading react/react-dom
to v17.0.2 and adapting index.tsx
to match react 17 did the trick.
There was probably a conflict with that extension (and possible others).
OK nice. Glad you figured out how to get past it.
Thanks a lot for your help!!!
Hi @enuchi ,
First of all, thank you for this awesome boilerplate, you did a great job!
We have an issue with our add-on, built on top of the boilerplate (I noticed the issue also happens with a fresh clone of the boilerplate and the included sample). The problem is that we are getting a white sidebar after installing the Chrome Station wallet extension. Once the extension is disabled, the sidebar loads fine.
Any idea why this happens and if something can be done to get the sidebar working?
Thank you for your time, Adrian
https://github.com/enuchi/React-Google-Apps-Script/assets/5249431/2b95c4f2-b397-4b71-a838-7b7776b41fab