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

Load package from CDN issue #138

Closed leonardolombardi07 closed 2 years ago

leonardolombardi07 commented 2 years ago

Hi! First I would like to thank you, this is an amazing repository. Thanks.

So, I must say I don't have much knowledge about Webpack and tooling as a whole, so I don't know how to debug my code in order to understand what's going on. Help needed 😅

When I give the command "npm start" and develop the extension in development mode, everything works perfectly. Now, when I give the command "npm run deploy" and the code for production is sent to Google App Script, none of the UI is rendered in the Sidebar I developed. The server functions seem to work perfectly though (when I run them directly from Google App Script).

With "DynamicCdnWebpackPluginConfig" having the "verbose" property being true, I see the following logs:

✔️ 'react' will be served by https://unpkg.com/react@18.2.0/umd/react.production.min.js ✔️ 'react-dom' will be served by https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js ✔️ 'semantic-ui-react' will be served by https://unpkg.com/semantic-ui-react@2.1.3/dist/umd/semantic-ui-react.min.js ❌ 'gas-client' couldn't be found, please add it to https://github.com/mastilver/module-to-cdn/blob/master/modules.json ❌ 'uuid' couldn't be found, please add it to https://github.com/mastilver/module-to-cdn/blob/master/modules.json

I suspect it has something to do with the 'gas-client' library. This is the repository: https://github.com/leonardolombardi07/caption-manager

Any help is appreciated. Again, thanks!

leonardolombardi07 commented 2 years ago

Done, the error was in the "var" in the webpack config. Thanks

enuchi commented 2 years ago

Thanks @leonardolombardi07, so anything that needs to get updated here?

leonardolombardi07 commented 2 years ago

The best thing would be to automatically detect the global exported variable from the CDN code, but I don't how hard this is. So maybe just improve a little bit the comment:

"var" is important to get right -- this should be the exposed global. Look up "webpack externals" for info.

To something like: "var" is important to get right - this should be the exposed global variable from the CDN's code. You can find the name of this variable by looking for "exports" in the CDN code. Look up "webpack externals" for info.

Not sure if that really helps more, but i think it would have helped me

enuchi commented 2 years ago

Yeah not sure. I may tweak the language a bit but it is just tricky to figure out regardless and some packages don't even expose the variable anyway. Have struggled with this myself to be honest.