UI Created not rendering on production deployment.

[FearTheBeard95]

Hi, i've started using this template for an add on on google sheet. I have this issue when i deploy the project the UI does not render but when running it in dev using npm run start the UI shows up as it should

[RealSlimMahdi]

I get the exact same issue right now! would you have a clue @enuchi ?

[enuchi]

Is it happening with a fresh clone?

[RealSlimMahdi]

I just tried, and the fresh clone seems to work ok. The only issue was to install

npm i @google/clasp@2.4.2

2.4.1 shows regular error (google offline message).

[enuchi]

@FearTheBeard95 can you try npm run deploy with a fresh install?

[RealSlimMahdi]

@enuchi, when I open in chrome the bundled HTML produced by webpack it works, while in the app script iFRAME I have a blank page without error. Very weird (on my repo)

[m0opss]

I solved this with npm run deploy:dev and some webpack fixes for the dev mod

[shufflebyte]

This is what I tried right now...

Followed your explanation in the repo, enabled hot reloading and then started it with npm run start
For a minute or so empty window with heading:

Then after clicking a bit and changing the components (the change of "sidebar-about-page") is reflected instantly, the window changed to this:

Hope this helps

[enuchi]

@shufflebyte it looks like you have a separate issue than described above as yours appears to be happening in local development, not production build.

It looks like the issue with your case may be the GASClient is not loaded correctly from the unpkg.com CDN. Do you see any failed network call when opening the Sheet Editor (Bootstrap) page? Should look like this:

Can you also share your browser, OS, and node version?

[shufflebyte]

Hi @enuchi , thank you for your quick responses. You were right, I had another problem and also was on another topic, which is solved now. I tried again a few minutes ago and the issue has been solved by itself ;-). I also took a look in the network tab in my browser and there were no problems to find either. Thanks

[mattalco]

I am also seeing some weirdness where a development deployment works fine with npm run start but when I deploy using npm run deploy, all I get is a blank sidebar app.

I saw this previously a few months ago and think I corrected it by reordering some imports in one of my components. I haven't been able to isolate what's wrong this time though.

[enuchi]

Any network failures or console errors @mattalco? Also please share node version and OS.

[mattalco]

Thanks so much for following up, @enuchi.

I don't see any network or console errors beyond the usual chatter. I just compared a working branch of my code with the newer one that isn't working and I don't see any new/differing messages.

My node version is v16.15.0 and I am running macOS 13.2.1.

When I saw this issue back in October, I was able to psuedo-trace the issue by commenting out various imports in my app until I was able to narrow things down. And even back in then, it wasn't a perfect science - I just copied my new code over line by line and file by file until it started working again. Unfortunately, that doesn't seem to be working as well this time as I can only get a working response by commenting out 90%+ of my app.

My gut makes me think it's something with Babel/Webpack and how they may be doing something differently in dev vs. prod but I'm not familiar enough with those to diagnose effectively.

[enuchi]

Hmm what packages have you installed?

Can you read through #157 and see if it's relevant? Looks like there is an issue that shows up when uaing firebase (for example).

Maybe also try the changes at #160 if this seems relevant.

[mattalco]

My mind is blown right now - this fixed it!

I have made some small changes to the original base project, such as adding Tailwind support (full list of packages below). It's very strange to me that nothing between my old code and new code added any packages - I did remove one lodash module (sortBy I believe it was). I guess there's a difference somewhere though between dev and prod where template literals could cause a silent breakage and somehow my old code skirted this issue.

Thank you so much for your help with this. I really appreciate your timely responses and all the work you've put into this.

    "dependencies": {
        "@headlessui/react": "^1.6.6",
        "@heroicons/react": "^2.0.12",
        "@stripe/stripe-js": "^1.38.1",
        "@tailwindcss/forms": "^0.5.3",
        "clsx": "^1.2.1",
        "dayjs": "^1.11.5",
        "nanoid": "^4.0.0",
        "postcss-loader": "^7.0.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-plaid-link": "^3.3.2"
    },
    "devDependencies": {
        "@babel/cli": "^7.17.6",
        "@babel/core": "^7.17.8",
        "@babel/eslint-parser": "^7.17.0",
        "@babel/plugin-proposal-class-properties": "^7.17.12",
        "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
        "@babel/plugin-proposal-optional-chaining": "^7.17.12",
        "@babel/plugin-transform-object-assign": "^7.16.7",
        "@babel/plugin-transform-template-literals": "^7.18.9",
        "@babel/polyfill": "^7.12.1",
        "@babel/preset-env": "^7.18.2",
        "@babel/preset-react": "^7.17.12",
        "@effortlessmotion/dynamic-cdn-webpack-plugin": "^5.0.1",
        "@effortlessmotion/html-webpack-inline-source-plugin": "^1.0.3",
        "@google/clasp": "^2.4.1",
        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
        "autoprefixer": "^10.4.7",
        "babel-loader": "^8.2.5",
        "babel-plugin-add-module-exports": "^1.0.4",
        "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
        "babel-plugin-transform-es3-property-literals": "^6.22.0",
        "copy-webpack-plugin": "^11.0.0",
        "cross-env": "^7.0.3",
        "css-loader": "^6.7.1",
        "dotenv": "^16.0.1",
        "eslint": "^8.26.0",
        "eslint-config-airbnb-base": "^15.0.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-config-standard": "^17.0.0",
        "eslint-plugin-babel": "^5.3.1",
        "eslint-plugin-googleappsscript": "^1.0.4",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jest": "^26.5.3",
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-promise": "^6.0.0",
        "eslint-plugin-react": "^7.31.10",
        "eslint-plugin-standard": "^5.0.0",
        "gas-client": "^1.1.1",
        "gas-lib": "^2.0.4",
        "gas-types-detailed": "^1.1.1",
        "gas-webpack-plugin": "^2.3.0",
        "html-webpack-plugin": "^5.5.0",
        "mkdirp": "^1.0.4",
        "module-to-cdn": "^3.1.5",
        "postcss": "^8.4.14",
        "prettier": "^2.7.1",
        "prettier-plugin-tailwindcss": "^0.1.13",
        "react-refresh": "^0.14.0",
        "rimraf": "^3.0.2",
        "style-loader": "^3.3.1",
        "tailwindcss": "^3.1.6",
        "terser-webpack-plugin": "^5.3.3",
        "ts-loader": "^9.3.0",
        "webpack": "^5.73.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.9.2"
    }

[enuchi]

Great, glad this helped. I will work on getting that PR completed, just need to take a closer look.