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

Prevent withSidebarNotices breaking the rules of hooks #8820

Merged
merged 1 commit into from Mar 23, 2023
Merged

Prevent withSidebarNotices breaking the rules of hooks #8820

merged 1 commit into from Mar 23, 2023

Conversation

mikejolley
Copy link
Member

Fixes the following console warning:

react-dom.js?ver=18.2.0:73 Warning: Internal React error: Expected static flag was missing. Please notify the React team.
    at https://woo.test/wp-content/plugins/woo-blocks/build/cart.js?ver=3b7459a31f63baa6781a01facc45f831:35:2204
    at https://woo.test/wp-content/plugins/woo-blocks/build/cart.js?ver=3b7459a31f63baa6781a01facc45f831:43:12712
    at FilteredComponentRenderer (https://woo.test/wp-includes/js/dist/components.js?ver=44a078ed77cc03c99918:67352:9)
    at BlockEdit (https://woo.test/wp-includes/js/dist/block-editor.js?ver=9f16435421d8488f0b7a:16298:5)
    at BlockCrashBoundary (https://woo.test/wp-includes/js/dist/block-editor.js?ver=9f16435421d8488f0b7a:16657:5)
    at BlockListBlock (https://woo.test/wp-includes/js/dist/block-editor.js?ver=9f16435421d8488f0b7a:17820:12)

This is because we are breaking the rules of hooks by returning before they have been executed.

Steps to reproduce:

  • Activate WP 6.2 RC using the WordPress Beta Tester plugin
  • Install WooCommerce 7.4.1
  • Activate the latest trunk of WooCommerce blocks.
  • Activate any FSE theme.
  • Go to Appearance -> Editor
  • Add Cart block to the template.
  • Open the browser console and select the Cart block on the editor.

Testing

Repeat the above steps and ensure the console is free of warnings.

Changelog

Fix react 18 error in the editor when using cart/checkout blocks.

@mikejolley mikejolley self-assigned this Mar 22, 2023
@woocommercebot woocommercebot requested a review from a team March 22, 2023 14:41
@github-actions
Copy link
Contributor

github-actions bot commented Mar 22, 2023 •
edited

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8820.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 479
  • Total errors: 2296

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

Size Change: -12 B (0%)

Total Size: 1.06 MB

Filename Size Change
build/cart.js 48.2 kB -6 B (0%)
build/checkout.js 45.7 kB -6 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 11.8 kB
build/all-products.js 36.8 kB
build/all-reviews.js 7.66 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.35 kB
build/attribute-filter-wrapper-frontend.js 4.5 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 43.9 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products-frontend.js 9.76 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/cart-frontend.js 29.3 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.84 kB
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 B
build/checkout-blocks/payment-frontend.js 8.39 kB
build/checkout-blocks/pickup-options-frontend.js 4.04 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.61 kB
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.9 kB
build/customer-account.js 3.17 kB
build/featured-category.js 14 kB
build/featured-product.js 14.4 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.9 kB
build/legacy-template.js 5.32 kB
build/mini-cart-component-frontend.js 28 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.86 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 572 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17 kB
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.39 kB
build/price-format.js 1.19 kB
build/product-add-to-cart-frontend.js 6.43 kB
build/product-add-to-cart.js 178 B
build/product-best-sellers.js 8.25 kB
build/product-button-frontend.js 1.98 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.24 kB
build/product-image-frontend.js 1.83 kB
build/product-image.js 178 B
build/product-new.js 8.25 kB
build/product-on-sale.js 8.58 kB
build/product-price-frontend.js 2.14 kB
build/product-query.js 11 kB
build/product-rating-frontend.js 1.4 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.04 kB
build/product-search.js 2.63 kB
build/product-sku-frontend.js 453 B
build/product-stock-indicator-frontend.js 1.07 kB
build/product-summary-frontend.js 1.35 kB
build/product-tag.js 8.73 kB
build/product-title-frontend.js 1.41 kB
build/product-title.js 178 B
build/product-top-rated.js 8.49 kB
build/products-by-attribute.js 9.57 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/rating-filter.js 7.42 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.11 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 3.15 kB
build/stock-filter.js 8.13 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.24 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.78 kB
build/wc-blocks-editor-style.css 5.78 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 26.9 kB
build/wc-blocks-style.css 26.8 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.2 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

tarunvijwani
tarunvijwani approved these changes Mar 22, 2023
View reviewed changes
Copy link
Contributor

@tarunvijwani tarunvijwani left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for fixing it so quickly! Works great! 🎉
Just for my learning, from now onwards we should first declare everything before returning out?

@github-actions github-actions bot added this to the 9.9.0 milestone Mar 22, 2023
@mikejolley
Copy link
Member Author

Just for my learning, from now onwards we should first declare everything before returning out?

@tarunvijwani no, you don't have to declare everything. You just cannot use hooks (useEffect, useState, etc) after a return statement.

@mikejolley mikejolley merged commit 4f3d27a into trunk Mar 23, 2023
31 checks passed
@mikejolley mikejolley deleted the fix/react-static-error branch March 23, 2023 10:24
@tarunvijwani tarunvijwani added type: bug The issue/PR concerns a confirmed bug. skip-changelog PRs that you don't want to appear in the changelog. and removed skip-changelog PRs that you don't want to appear in the changelog. labels Mar 27, 2023
@opr opr mentioned this pull request Apr 11, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@tarunvijwani tarunvijwani tarunvijwani approved these changes

Assignees

@mikejolley mikejolley

Labels
type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Milestone
9.9.0
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@mikejolley @tarunvijwani