Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Build: Fix errors related to WP5.8-beta2 updates and drop IE11 support. #4362

Closed
wants to merge 3 commits into from

Conversation

nerrad
Copy link
Contributor

@nerrad nerrad commented Jun 16, 2021

After updating to WordPress 5.8-beta2, we noticed that all our builds were breaking in the browser with an error containing something like this (variations of actual text, but all referencing undefined 'mark'):

 errors.js:15 Uncaught TypeError: Cannot read property ‘mark’ of undefined

This can be traced to a missing polyfill as a result of this change in WP core for the WP 5.8 branch.

While there are some efforts to restore this polyfill in WordPress(which will likely negate the urgency of this Pull Request), I'm still publishing this as something that we'll want to work on anyways (and we can decide whether it needs to go in the Woo Core 5.5 release as a part of Woo Blocks 5.3 branch depending on the outcome of the WP core changes and if there are any other polyfill related issues).

Unfortunately, at the moment I can't own the completion of this work, so I've pushed this in progress PR which functionally fixes all the issues by:

  • updating WP related babel packages.
  • switching to @wordpress/babel-preset-default in our Webpack configuration and removing async generator.
  • fixing some reference errors exposed by the changes (likely because previously Webpack polyfills were hiding the issue).

Also:

  • This drops IE11 support and adopts what the latest @wordpress/browserlist-config settings are.
  • Cleans up a bit of our package dependencies and Webpack configuration for babel config.

I've tested this on WP 5.8-beta2 and WP 5.7.2 and things seem to work okay but note that the Stripe Extension and WooCommerce Payments are affected by this bug, so if you have either of those active you will still experience similar errors in the checkout/cart blocks.

Next Steps

  • Do more thorough testing against supported WP versions.
  • Test across browsers we support to make sure there are no unexpected bugs surfacing (I tested latest Chrome).
  • Audit our Webpack config and package dependencies. I have a feeling we can likely get rid of most of the babel plugins we're using directly in the webpack config with the switch to @wordpress/babel-preset-default. We might just need to keep the prop-types removal plugin (and maybe the class properties one, but should check if that's only needed for IE11 support...) for production builds.
  • Follow the linked WP core issue and see if any fixes they apply to restore the polyfill also fixes using Woo Blocks trunk with WP 5.8. That will help decide whether we need to cherrypick this PR into the Woo Blocks 5.3.1 branch (there will be other issues to deal with if that's the case as earlier versions of Woo Core would likely have blocks break in WP 5.8).
  • I haven't checked whether our automated test suite fails or not related to this. So any fixes in test builds will need addressed. (they pass)
  • Same as ^^ for Storybook builds.

This surfaced with the build process changes. Likely any polyfills added by WebPack covered over the problem.
@nerrad nerrad requested a review from a team as a code owner June 16, 2021 15:45
@nerrad nerrad requested review from frontdevde and removed request for a team June 16, 2021 15:45
@nerrad nerrad added priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. type: bug The issue/PR concerns a confirmed bug. tools Used for work on build or release tools. labels Jun 16, 2021
@github-actions
Copy link
Contributor

Size Change: -72 kB (-7%) ✅

Total Size: 919 kB

Filename Size Change
build/active-filters-frontend.js 6.4 kB -1.57 kB (-20%) 🎉
build/active-filters.js 6.57 kB -951 B (-13%) 👏
build/all-products-frontend.js 33.5 kB -1.29 kB (-4%)
build/all-products.js 30.9 kB -5.66 kB (-15%) 👏
build/all-reviews.js 8.02 kB -1.27 kB (-14%) 👏
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 1.95 kB -460 B (-19%) 👏
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.56 kB -437 B (-22%) 🎉
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 332 B -3 B (-1%)
build/atomic-block-components/add-to-cart-frontend.js 7.32 kB -1.43 kB (-16%) 👏
build/atomic-block-components/add-to-cart.js 6.11 kB -1.69 kB (-22%) 🎉
build/atomic-block-components/button-frontend.js 1.63 kB -99 B (-6%)
build/atomic-block-components/button.js 811 B -32 B (-4%)
build/atomic-block-components/category-list-frontend.js 453 B -17 B (-4%)
build/atomic-block-components/category-list.js 457 B -20 B (-4%)
build/atomic-block-components/image-frontend.js 1.59 kB -67 B (-4%)
build/atomic-block-components/image.js 992 B -315 B (-24%) 🎉
build/atomic-block-components/price-frontend.js 1.86 kB -119 B (-6%)
build/atomic-block-components/price.js 1.59 kB -414 B (-21%) 🎉
build/atomic-block-components/rating-frontend.js 509 B -12 B (-2%)
build/atomic-block-components/rating.js 513 B -10 B (-2%)
build/atomic-block-components/sale-badge-frontend.js 454 B -15 B (-3%)
build/atomic-block-components/sale-badge.js 458 B -15 B (-3%)
build/atomic-block-components/sku-frontend.js 377 B -12 B (-3%)
build/atomic-block-components/sku.js 382 B -11 B (-3%)
build/atomic-block-components/stock-indicator-frontend.js 542 B -28 B (-5%)
build/atomic-block-components/stock-indicator.js 547 B -25 B (-4%)
build/atomic-block-components/summary-frontend.js 789 B -117 B (-13%) 👏
build/atomic-block-components/summary.js 791 B -118 B (-13%) 👏
build/atomic-block-components/tag-list-frontend.js 452 B -14 B (-3%)
build/atomic-block-components/tag-list.js 452 B -19 B (-4%)
build/atomic-block-components/title-frontend.js 1.34 kB -71 B (-5%)
build/atomic-block-components/title.js 906 B -355 B (-28%) 🎉
build/attribute-filter-frontend.js 16.5 kB -1.21 kB (-7%)
build/attribute-filter.js 10.1 kB -1.3 kB (-11%) 👏
build/blocks-checkout-editor.js 9.13 kB -1.42 kB (-13%) 👏
build/blocks-checkout.js 19.4 kB -504 B (-3%)
build/cart-frontend.js 73.7 kB -4.64 kB (-6%)
build/cart.js 38.8 kB -6.33 kB (-14%) 👏
build/checkout-frontend.js 77.7 kB -4.69 kB (-6%)
build/checkout.js 41 kB -6.3 kB (-13%) 👏
build/featured-category.js 6.23 kB -1.01 kB (-14%) 👏
build/featured-product.js 7.92 kB -1.48 kB (-16%) 👏
build/handpicked-products.js 4.91 kB -977 B (-17%) 👏
build/price-filter-frontend.js 12.4 kB -1.87 kB (-13%) 👏
build/price-filter.js 8.26 kB -1.04 kB (-11%) 👏
build/price-format.js 1 kB -373 B (-27%) 🎉
build/product-best-sellers.js 5.07 kB -1.05 kB (-17%) 👏
build/product-categories.js 2.91 kB -474 B (-14%) 👏
build/product-category.js 5.89 kB -1.11 kB (-16%) 👏
build/product-new.js 5.23 kB -1.05 kB (-17%) 👏
build/product-on-sale.js 5.6 kB -1.02 kB (-15%) 👏
build/product-search.js 2.43 kB -243 B (-9%)
build/product-tag.js 5.29 kB -817 B (-13%) 👏
build/product-top-rated.js 5.2 kB -1.05 kB (-17%) 👏
build/products-by-attribute.js 6.04 kB -1.18 kB (-16%) 👏
build/reviews-by-category.js 9.68 kB -1.5 kB (-13%) 👏
build/reviews-by-product.js 10.6 kB -2.1 kB (-16%) 👏
build/reviews-frontend.js 7.37 kB -1.57 kB (-18%) 👏
build/single-product-frontend.js 36.7 kB -1.58 kB (-4%)
build/single-product.js 8.08 kB -1.56 kB (-16%) 👏
build/vendors--atomic-block-components/price-frontend.js 6.54 kB +1 B (0%)
build/wc-blocks-data.js 8.47 kB -2.46 kB (-23%) 🎉
build/wc-blocks-google-analytics.js 1.97 kB -22 B (-1%)
build/wc-blocks-middleware.js 1.25 kB -237 B (-16%) 👏
build/wc-blocks-registry.js 2.35 kB -393 B (-14%) 👏
build/wc-blocks-shared-context.js 1.51 kB -34 B (-2%)
build/wc-blocks-shared-hocs.js 969 B -771 B (-44%) 🎉
build/wc-blocks-vendors.js 242 kB -169 B (0%)
build/wc-blocks.js 2.96 kB -554 B (-16%) 👏
build/wc-payment-method-bacs.js 825 B +13 B (+2%)
build/wc-payment-method-cheque.js 820 B +13 B (+2%)
build/wc-payment-method-cod.js 921 B +18 B (+2%)
build/wc-payment-method-paypal.js 848 B +4 B (0%)
build/wc-payment-method-stripe.js 11.5 kB -945 B (-8%)
build/wc-settings.js 2.55 kB -385 B (-13%) 👏
ℹ️ View Unchanged
Filename Size Change
build/wc-blocks-editor-style-rtl.css 14.9 kB 0 B
build/wc-blocks-editor-style.css 14.9 kB 0 B
build/wc-blocks-style-rtl.css 19.1 kB 0 B
build/wc-blocks-style.css 19 kB 0 B
build/wc-blocks-vendors-style-rtl.css 1.05 kB 0 B
build/wc-blocks-vendors-style.css 1.05 kB 0 B

compressed-size-action

@mikejolley
Copy link
Member

Is this PR still needed?

@nerrad
Copy link
Contributor Author

nerrad commented Aug 3, 2021

It's no longer needed to address any errors, but the performance gains from dropping IE11 support in our builds would be nice.

@github-actions
Copy link
Contributor

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 10, 2021
@nerrad nerrad removed the status: stale Stale issues and PRs have had no updates for 60 days. label Nov 19, 2021
@mikejolley
Copy link
Member

I extracted the IE11 stuff into an updated PR here #5212

@mikejolley mikejolley closed this Nov 22, 2021
@nielslange nielslange deleted the fix/wp-5.8-fixes branch March 3, 2023 03:55
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. tools Used for work on build or release tools. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants