White (blank) sidebar in Chrome when using Station wallet Chrome extension

[adim1973]

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

2023-11-17_14h40_16.mp4

[Elisha Nuchi]

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.

[adim1973]

I'm not sure what's happening, the iframe seems to load fine but the content is not rendered.

[Elisha Nuchi]

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:

• do other GAS add-ons work with your extension running?
• try adding some html content to the html template like

  test

  and see if it renders. If it does it could be an issue with loading react.

[adim1973]

Thank you for replying!

1. Other Sheets add-ons with sidebar are working fine with the problematic extension enabled
2. Some html text is displayed correctly
3. The clone test add-on works fine with the problematic extension disabled

[Elisha Nuchi]

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;
 }

[adim1973]

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).

[adim1973]

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:

1. the working add-on uses react 16, while my add-on uses react 18 (maybe the problematic chrome add-on also uses react 18 and somehow there is a conflict)
2. the working add-on has the react/react-dom script declarations in the head section (my add-on in body)
3. the working add-on has the 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

[Elisha Nuchi]

I'd stick to testing with the provided sidebar app since it is a good minimal example. Looks like your app loads other libraries.

• Try not externalizing both react and react-dom:

    if (packageName === 'react' || packageName === 'react-dom') {
      return null;
    }

• Can you see if there are any differences in messages/errors printed in the console or requests in network tab with the base sidebar example with problematic add-on turned on vs turned off?

[adim1973]

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

[adim1973]

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).

[Elisha Nuchi]

OK nice. Glad you figured out how to get past it.

[adim1973]

Thanks a lot for your help!!!