UI Created not rendering on production deployment.
FearTheBeard95 opened this issue · comments
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
I get the exact same issue right now! would you have a clue @enuchi ?
Is it happening with a fresh clone?
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).
@FearTheBeard95 can you try npm run deploy with a fresh install?
@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)
I solved this with npm run deploy:dev and some webpack fixes for the dev mod
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
@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?
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
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.
Any network failures or console errors @mattalco? Also please share node version and OS.
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.
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"
}
Great, glad this helped. I will work on getting that PR completed, just need to take a closer look.
I am getting this same error. I can recreate it on a brand new clone of this repo:
git clone https://github.com/enuchi/React-Google-Apps-Scriptnpm install(as well as the rest of the regular setup steps)npm install react-colornpm install @tiptap/extension-underlinenpm install @tiptap/extension-link- In
src/client/dialog-demo-tailwindcss/components/SheetEditor.jsxadd the following starting on line 5:
import Underline from '@tiptap/extension-underline';
import { SketchPicker } from 'react-color';
import Link from '@tiptap/extension-link';
It works when you run npm run start but running npm run deploy shows as a blank screen. The order of those imports is important. If you rearrange the order of those 3 imports it works but leaving them as is doesn't work when deploying. In my real project I have many more of these tiptap imports that are causing the same issue and I've been trying to figure out the order of them to get my real life app to deploy.
My node version is v20.4.0 running Ubuntu 23.04 and Chrome Version 119.0.6045.105 (Official Build) (64-bit). I seem to have the same issue on Brave browser as well. Also, the versions of the packages that were installed were as follows:
"@tiptap/extension-link": "^2.1.12",
"@tiptap/extension-underline": "^2.1.12",
"react-color": "^2.19.3",
These were all installed in the "dependencies" section.
Thanks for this excellent library and please let me know if you have any questions!
Also, is there a way to show error logging when running the deploy command? I am not so good at React but I would think some sort of temporary logging could help sort this out.
So, my case is similar to @mattalco in that npm run deploy seems to have an issue with the order of the imports.
If I copy the output of dialog-demo-tailwindcss.html to jsfiddle.net the page appears fine.
If I copy the src/client/dialog-demo-tailwindcss/components/SheetEditor.jsx to code sandbox (and remove the relative imports like FormInput since we aren't testing that) then it also works.
Not sure if any of that helps
If I log the output of html.getContent() from openDialogTailwindCSS to the Sheet itself (you'll get an error if you log to the standard Logger.log that it is too long then I get something interesting....a huge amount of html that when I import it to JSFIddle it complains that there is no closing </script> tag
<!doctype html><html><head>...</head><body>.....<script>.....</script><script>.....&&(e=Tf.defaultProtocol),this.hasProtocol()?this.v:${e}:>`
It has the closing body and html tags so I know it didn't get truncated.
Yes I will try to find relevant issues a bit later today.
Did you try the fix posted above? https://github.com/enuchi/React-Google-Apps-Script/pull/160/files
Yeah, that seems to work! I saw the above referenced issue but I guess I didn't think to try the PR you linked to. But it all seems to be working well. Thanks!