Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update webpack globally #20789

Merged
merged 12 commits into from
Aug 24, 2021
Merged

Update webpack globally #20789

merged 12 commits into from
Aug 24, 2021

Conversation

gravityrail
Copy link
Contributor

We previously updated to webpack 5, plus the latest @automattic/calypso-build (v9.0.0) for Jetpack. This applies those same version updates, plus the latest webpack-cli, to all the places where we use them.

Changes proposed in this Pull Request:

  • Update all projects to latest webpack, webpack-cli and calypso-build

Jetpack product discussion

p1629397551142600-slack-jetpack-crew

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Nothing should change, though we may get a few new deprecation warnings.

@matticbot
Copy link
Contributor

Caution: This PR has changes that must be merged to WordPress.com
Hello gravityrail! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D65812-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

Copy link

@test-case-reminder test-case-reminder bot left a comment

Choose a reason for hiding this comment

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

Here are some suggested test cases for this PR.

Connection

  • In-place connection with free plan
  • In-place connection with paid plan
  • In-place connection with product purchase
  • Classic connection. Use Safari, or set a constant JETPACK_SHOULD_NOT_USE_CONNECTION_IFRAME to true
  • Disconnect/reconnect connection
  • Secondary user connection
  • Connection on multisite

Verify that the changes are compatible with the plugins that use the connection package.

  • WooCommerce Payments
  • Jetpack Boost
  • Previous versions of Jetpack

If you think that suggestions should be improved please edit the configuration file here. You can also modify/add test-suites to be used in the configuration file.

@gravityrail gravityrail requested a review from anomiex August 22, 2021 01:48
@github-actions github-actions bot added [Package] Connection UI This package no longer exists in the monorepo. [Package] Identity Crisis This package no longer exists in the monorepo. It was merged into [Package] Connection. [Package] Jitm [Package] Lazy Images This package no longer exists in the monorepo. [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ labels Aug 22, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Aug 22, 2021

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ All commits were linted before commit.
  • ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖


The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.


Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.


Jetpack plugin:

  • Next scheduled release: September 7, 2021.
  • Scheduled code freeze: August 30, 2021.

Backup plugin:

  • Next scheduled release: September 7, 2021.
  • Scheduled code freeze: August 30, 2021.

@github-actions github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Aug 22, 2021
@sdixon194 sdixon194 added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Aug 23, 2021
@retrofox retrofox changed the title Update webpack globally A' Aug 23, 2021
@retrofox retrofox changed the title A' try/update-webpack-globally Aug 23, 2021
@retrofox
Copy link
Contributor

sorry I was taking a look at the PR and changed the title accidentally :-(

@anomiex anomiex changed the title try/update-webpack-globally Update webpack globally Aug 23, 2021
It added a @todo saying to make it use calypso-build again, which I
figured out how to do.
Webpack 5 breaks if you pass `argv.entry` through as `entry` from your
config function. Webpack 4 was ok with that.

I have no idea whether that's a bug in webpack 5 for breaking that, or
calypso-build for passing it through instead of letting webpack handle
it. Either way, this works around it.

Also of note is that calypso-build now declares webpack as a peer dep,
so lazy-images needs to depend on it to provide the peer.
anomiex
anomiex previously approved these changes Aug 23, 2021
Copy link
Contributor

@anomiex anomiex left a comment

Choose a reason for hiding this comment

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

Looks sensible to me. I fixed lazy-images to continue using calypso-build, see a72fa61 for an explanation of what was breaking there.

@gravityrail gravityrail enabled auto-merge (squash) August 23, 2021 19:50
@gravityrail
Copy link
Contributor Author

@anomiex thanks for the patch. Unfortunately it broke es5 validation for the built lazy-images package.

 > @ validate-es5 /home/runner/work/jetpack/jetpack/projects/packages/lazy-images
  > eslint --parser-options=ecmaVersion:5 --no-eslintrc --no-ignore "./dist/"
  
  
  /home/runner/work/jetpack/jetpack/projects/packages/lazy-images/dist/intersection-observer.js
    1:3  error  Parsing error: Unexpected token )
  
  /home/runner/work/jetpack/jetpack/projects/packages/lazy-images/dist/lazy-images.js
    1:3  error  Parsing error: Unexpected token )

I'll jump in and fix this, since I already fixed it previously.

No more IE11 => newer ecmaVersion
anomiex
anomiex previously approved these changes Aug 23, 2021
@anomiex
Copy link
Contributor

anomiex commented Aug 23, 2021

I'll jump in and fix this, since I already fixed it previously.

Oops, I already did before I saw your comment.

@gravityrail
Copy link
Contributor Author

@anomiex I reverted the change to es9 validation since it emits code that won't run in some browsers. Better to just emit es2015 as before, just in case. If we want to make a change to which browsers we support it should probably happen in a different PR.

@anomiex
Copy link
Contributor

anomiex commented Aug 23, 2021

We already did drop support for IE11. p1HpG7-c8n-p2

@gravityrail
Copy link
Contributor Author

gravityrail commented Aug 23, 2021

If it's cool with everyone else to update browser compat for this library in this PR then I'm fine with that. I just didn't want to introduce accidental/unexpected breakage outside the scope of the change. But if it's not going to break anything then let's go es9!

@anomiex
Copy link
Contributor

anomiex commented Aug 23, 2021

Actually... I don't have any idea what calypso-build is doing, but just adding the

       "browserslist": [
               "extends @wordpress/browserslist-config"
       ],

bit (and the dep on @wordpress/browserslist-config) is somehow enough to restore IE11 support when I build locally. All the other stuff you added in 9b17538 seems unnecessary.

I have no idea what's going on with that, since @wordpress/browserslist-config 4.1.0 doesn't include IE11 so if anything I'd think it should be the opposite.

@gravityrail
Copy link
Contributor Author

gravityrail commented Aug 23, 2021 via email

@anomiex
Copy link
Contributor

anomiex commented Aug 24, 2021

OK, I see what's going on now.

  • The source files are written in ES5 (which is left over from before we added transpilation via calypso-build in Lazy Images: Use calypso-build to build #17571). Babel doesn't "upgrade" any of the syntax to later versions, so the syntax remains ES5.
  • @wordpress/browserslist-config 4.1.0 includes "op_mini all". This triggers webpack to not use arrow functions in its own boilerplate.

Thus the output winds up compatible with ES5, so the validate-es5 check passes.

But the "op_mini all" is apparently ignored by Babel, so if we were to update the source files (which we probably should do one of these days now that we use calypso-build) the validate-es5 check would no longer pass.

What we really need to do is to figure out how to make a validate check that uses the browserslist targets instead of just guessing at an appropriate ES parser level. See p9dueE-3fG-p2 for more on that topic.

EDIT: "op_mini all" is included via "> 1%", as the caniuse data currently has it at 1.08%.

This works for the moment thanks to `@wordpress/browserslist-config`'s
"> 1%" including Opera Mini.

We'll have to update the "validate-es5" check if we update the JS
sources to modern standards, or that usage drops below 1%.
@anomiex anomiex disabled auto-merge August 24, 2021 15:26
@anomiex
Copy link
Contributor

anomiex commented Aug 24, 2021

Turning off auto-merge to get review of my own change to the PR.

anomiex added a commit that referenced this pull request Aug 24, 2021
`node-sass` is deprecated and sort-of depends on being able to download
precompiled binaries that match the version of node in use. `sass` is
the replacement.

The update to calypso-build 9.0.0 in #20789 took care of most of the
dependencies on `node-sass` in the monorepo. This cleans up the rest.
@gravityrail
Copy link
Contributor Author

Looks great @anomiex - thanks for getting to the bottom of it. I did think a few times "how the hell did this ever work, and how does that other thing still work, and..." but you managed to get to the bottom of it with that op_mini thing.

@gravityrail gravityrail merged commit 87a7520 into master Aug 24, 2021
@gravityrail gravityrail deleted the try/update-webpack-globally branch August 24, 2021 16:31
@github-actions github-actions bot removed the [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. label Aug 24, 2021
@github-actions
Copy link
Contributor

Great news! One last step: head over to your WordPress.com diff, D65812-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

anomiex added a commit that referenced this pull request Aug 24, 2021
`node-sass` is deprecated and sort-of depends on being able to download
precompiled binaries that match the version of node in use. `sass` is
the replacement.

The update to calypso-build 9.0.0 in #20789 took care of most of the
dependencies on `node-sass` in the monorepo. This cleans up the rest.
anomiex added a commit that referenced this pull request Aug 24, 2021
`node-sass` is deprecated and sort-of depends on being able to download
precompiled binaries that match the version of node in use. `sass` is
the replacement.

The update to calypso-build 9.0.0 in #20789 took care of most of the
dependencies on `node-sass` in the monorepo. This cleans up the rest.
@anomiex
Copy link
Contributor

anomiex commented Aug 24, 2021

r230707-wpcom

anomiex added a commit that referenced this pull request Aug 25, 2021
`node-sass` is deprecated and sort-of depends on being able to download
precompiled binaries that match the version of node in use. `sass` is
the replacement.

The update to calypso-build 9.0.0 in #20789 took care of most of the
dependencies on `node-sass` in the monorepo. This cleans up the rest.
sergeymitr added a commit that referenced this pull request Sep 2, 2021
* fix dashboard styling for the Backup plugin
* bring back the "Cloud" icon, the path changed after the Webpack update (#20789)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[JS Package] Storybook [Package] Connection UI This package no longer exists in the monorepo. [Package] Identity Crisis This package no longer exists in the monorepo. It was merged into [Package] Connection. [Package] Jitm [Package] Lazy Images This package no longer exists in the monorepo. [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ Touches WP.com Files
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants