Fix Prod Build Bug w/ Bootstrap & Updated Dependencies #59

bbland1 · 2024-10-04T01:35:12Z

Description

As we discovered on Monday the production version of the app was mad 😡. It was working locally but not after getting built somehow. While the build steps were "passing" in Github Actions something was not right.

In office hours we updated some of the dependencies, but the build still wasn't working. Then we looked at how bootstrap/react-bootstrap worked with vite and how sass needed to be imported. We wrote a resolver in the vite config file to be able to properly resolve the sass imports as we found in the documentation. After we got to those steps we did some manual testing of how the application was handling the building of it in the manualChunks seeing that without that there wasn't an issue with the app but it was saying the minification was a bit large.

After finding that the manual chunking seemed to be a sticking point, I went through the vite and rollup documentation to see how it was handled. With the error focusing on a forwardRef issue I did a bit of googling and it seemed it was something used by react-bootstrap and the manual chunking was chunking parts of the node_modules to minify it but was separating parts that the react-bootstrap needed in a dependency of it called @restart I added a guard clause to the manual chunking that would bundle the react-bootstrap and @restart into the same group. That for rid of the forwardRef and I got a react minification #299 that when looking it up said the target wasn't a DOM element it was and changing the script tag in the html to defer got rid of that.

Lastly I noticed there was a duplication in the AuthnticatedNavBar and the one the app was using wasn't getting the .scss applied to that so I did correct that here as well.

Acceptance Criteria

MAKE THE APP LOAD AGAIN 😅😂🎉

Type of Changes

	Type
✓	⬆️ update dependencies
✓	🐛 bug fix
✓	💚 fix prod build

Updates

Before

After

Testing Steps / QA Criteria

Please click the preview link of this PR the issue has been only happen in the prod app after it builds so need to confirm it works there.

github-actions · 2024-10-04T01:36:23Z

Visit the preview URL for this PR (updated for commit 93c2ca2):

https://tcl-77-smart-shopping-list--pr59-update-deps-d8hg77f6.web.app

_{(expires Fri, 11 Oct 2024 07:34:02 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

bbland1 · 2024-10-04T02:23:36Z

We were working in office hours to see if we could fix the prod link not working

…p better, resolve bootstrap and css preprocessor setting for vite compiling of project

…oking for root DOM element and not getting it causing react minification error

…e one the homepage is using has the scss styling and made sure the unauthenticated used it as well

bbland1 · 2024-10-04T08:06:54Z

Honestly shoutout to yall @RossaMania for sparking the idea that it was a config issue in vite, @adidalal for the dependency updates and the resolver with the change in imports because it was needed, @alex-andria, @zahrafalak and @eternalmaha for staying after office hours and late to just bounce ideas and problem solve. Oh and Alex for finding the breadcrumb to look at the manual chunking. And in general for bouncing ideas and hearing me out as I tried to figure out where the bootstrap issue started! 🎉✨

alex-andria

Wow amazing work! Great investigative skills and putting that research into an actionable and working solution. From my end in local and build preview, bootstrap is working!!

I did notice that there are some design flaws in the item list that if your team decides to fix in a later PR may be a good start.

Great work!

alex-andria · 2024-10-05T17:50:04Z

vite.config.js

+						if (id.includes("react-bootstrap") || id.includes("@restart")) {
+							return "vendor__react-bootstrap";
+						}
+


WOOOO!! Great job continuing from where we left off Brianna!! I'm amazed by your research skills - as always - and am so happy that you found this fix after reading the Vite and rollup documentation.

You really sprung it into action with finding the manual chucking commented out worked again!

alex-andria · 2024-10-05T17:50:47Z

vite.config.js

+				api: "modern-compiler",
+			},
+		},
+	},


These are the same changes from Falak's old PR?

Maybe, it was one of the things that cute talks about when using sass and I didn't see it in there when I was writing the resolver and the manual chunks so I did add it as well. I'd have to look at the old PR 🤔 this was branched from the messed up main so it may have been in a PR but didn't merge 🤷🏽‍♀️

bbland1 · 2024-10-05T18:30:10Z

Wow amazing work! Great investigative skills and putting that research into an actionable and working solution. From my end in local and build preview, bootstrap is working!!

I did notice that there are some design flaws in the item list that if your team decides to fix in a later PR may be a good start.

Great work!

@alex-andria If its the black box, the scrolling with that filter area staying on top was implemented before we had colors and I have dark mode on my browser so I just picked a color that would let me see the that area floated on top while scrolling 😅 it should be changed as we fix the design.

RossaMania

Nice job figuring this out! I know from experience that deploying with Vite can be tricky! It looks like everything is up to date!

update dependencies

db61d35

bbland1 marked this pull request as ready for review October 4, 2024 01:35

attempting to fix bootstrap install with a resolver

a232333

bbland1 added 4 commits October 4, 2024 03:11

fix: merged in stashed changes to vite config to chunk react-bootstra…

19dedc1

…p better, resolve bootstrap and css preprocessor setting for vite compiling of project

fix: changed script tag to defer because on first load of page was lo…

56ee118

…oking for root DOM element and not getting it causing react minification error

chore: removed the unneeded style link in html

97c3ea4

fix: there was a duplication in the AuthenticatedNavBar, made sure th…

93c2ca2

…e one the homepage is using has the scss styling and made sure the unauthenticated used it as well

bbland1 self-assigned this Oct 4, 2024

bbland1 added bug fix update dependencies labels Oct 4, 2024

bbland1 changed the title ~~update dependencies~~ Fix Prod Build Bug w/ Bootstrap & Updated Dependencies Oct 4, 2024

bbland1 requested review from zahrafalak, tannaurus, adidalal, alex-andria, RossaMania and eternalmaha October 4, 2024 07:58

alex-andria approved these changes Oct 5, 2024

View reviewed changes

RossaMania approved these changes Oct 6, 2024

View reviewed changes

bbland1 merged commit 0b75ac6 into main Oct 6, 2024
2 checks passed

bbland1 deleted the update-deps branch October 6, 2024 17:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Prod Build Bug w/ Bootstrap & Updated Dependencies #59

Fix Prod Build Bug w/ Bootstrap & Updated Dependencies #59

bbland1 commented Oct 4, 2024 •

edited

Loading

github-actions bot commented Oct 4, 2024 •

edited

Loading

bbland1 commented Oct 4, 2024

bbland1 commented Oct 4, 2024

alex-andria left a comment

alex-andria Oct 5, 2024

bbland1 Oct 5, 2024

alex-andria Oct 5, 2024

bbland1 Oct 5, 2024

bbland1 commented Oct 5, 2024

RossaMania left a comment

Fix Prod Build Bug w/ Bootstrap & Updated Dependencies #59

Fix Prod Build Bug w/ Bootstrap & Updated Dependencies #59

Conversation

bbland1 commented Oct 4, 2024 • edited Loading

Description

Acceptance Criteria

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

github-actions bot commented Oct 4, 2024 • edited Loading

bbland1 commented Oct 4, 2024

bbland1 commented Oct 4, 2024

alex-andria left a comment

Choose a reason for hiding this comment

alex-andria Oct 5, 2024

Choose a reason for hiding this comment

bbland1 Oct 5, 2024

Choose a reason for hiding this comment

alex-andria Oct 5, 2024

Choose a reason for hiding this comment

bbland1 Oct 5, 2024

Choose a reason for hiding this comment

bbland1 commented Oct 5, 2024

RossaMania left a comment

Choose a reason for hiding this comment

bbland1 commented Oct 4, 2024 •

edited

Loading

github-actions bot commented Oct 4, 2024 •

edited

Loading