Skip to content

feat(gatsby): upgrade webpack to version 5 #29145

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 38 commits into from
Feb 17, 2021
Merged

feat(gatsby): upgrade webpack to version 5 #29145

merged 38 commits into from
Feb 17, 2021

Conversation

@wardpeet
Copy link
Contributor

@wardpeet wardpeet commented Jan 22, 2021 •
edited
Loading

Description

Upgrade loaders to latest and upgrade webpack dependencies

  • Refactor static-queries mapper
    • make compatible with v5
    • move to a plugin for re-usability and readability
  • Fix random typescript typings
  • Make error handling compat with v5 and upgrade create-react-app-utils
  • Fix esm compatiblity by making sure fullySpecified is false on all loaders
  • Upgrade postcss loader and made it compatible
  • Add deprecation warnings to some plugins
  • remove style-loader and move to minicssextract plugin to handle both prod & dev
  • Remove PNP loader, part of webpack now
  • Fix externals by following aliases - for example when preact is used, we didn't use it for ssr because it was marked as an external.

Documentation

I'll have to write a bit in a changelog & upgrade path

Related Issues

[ch22209]

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jan 22, 2021
@wardpeet wardpeet marked this pull request as draft January 22, 2021 12:19
@LekoArts LekoArts added topic: webpack/babel Webpack or babel and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Jan 25, 2021
@wardpeet wardpeet force-pushed the v3/webpack-5 branch 2 times, most recently from 918e0da to d34ed57 Compare January 26, 2021 18:45
wardpeet
wardpeet commented Jan 26, 2021
View reviewed changes
pieh
pieh reviewed Jan 26, 2021
View reviewed changes
@wardpeet wardpeet force-pushed the v3/webpack-5 branch 2 times, most recently from 0557227 to ccbf341 Compare February 8, 2021 11:41
@wardpeet wardpeet changed the base branch from master to v3/dev-loader-async-requires February 8, 2021 11:42
@wardpeet wardpeet changed the title WIP: upgrade webpack 5 feat(gatsby): upgrade webpack 5 Feb 8, 2021
@wardpeet wardpeet changed the title feat(gatsby): upgrade webpack 5 feat(gatsby): upgrade webpack to version 5 Feb 8, 2021
@wardpeet wardpeet marked this pull request as ready for review February 8, 2021 11:54
@wardpeet wardpeet changed the base branch from v3/dev-loader-async-requires to master February 9, 2021 11:06
@wardpeet wardpeet force-pushed the v3/webpack-5 branch 2 times, most recently from 8de46d3 to 3ca3200 Compare February 9, 2021 11:09
wardpeet
wardpeet commented Feb 10, 2021
View reviewed changes
wardpeet
wardpeet commented Feb 11, 2021
View reviewed changes
@wardpeet
Copy link
Contributor Author

wardpeet commented Feb 11, 2021

Seems like fast-refresh is a bit broken with sourcemaps. We'll fix it while we look at fast-refresh in a follow up

vladar
vladar reviewed Feb 11, 2021
View reviewed changes
wardpeet
wardpeet commented Feb 12, 2021
View reviewed changes
pieh
pieh reviewed Feb 16, 2021
View reviewed changes
packages/gatsby/src/utils/worker/render-html.ts
Comment on lines -159 to +165
for (const [rel, assets] of Object.entries(namedChunkGroup.childAssets)) {
// @ts-ignore TS doesn't like that assets is not typed and especially that it doesn't know that it's Iterable
for (const asset of assets) {
handleAsset(asset, rel)
}
}
// for (const [rel, assets] of Object.entries(namedChunkGroup.childAssets)) {
// // @ts-ignore TS doesn't like that assets is not typed and especially that it doesn't know that it's Iterable
// for (const asset of assets) {
// handleAsset(asset, rel)
// }
// }
Copy link
Contributor

@pieh pieh Feb 16, 2021

Choose a reason for hiding this comment

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

new webpack.stats.json don't have childAssets, so:

import(
  /* webpackChunkName: "imp-prefetch", webpackPrefetch: true */ `../components/imp-prefetch`
).then(mod => {
  mod.wat()
})
import(
  /* webpackChunkName: "imp-preload", webpackPreload: true */ `../components/imp-preload`
).then(mod => {
  mod.wat2()
})

currently is not genering preload/prefetch scripts in .html files

pieh
pieh reviewed Feb 16, 2021
View reviewed changes
wardpeet
wardpeet commented Feb 16, 2021
View reviewed changes
wardpeet
wardpeet commented Feb 16, 2021
View reviewed changes
packages/gatsby/package.json Outdated
"scripts": {
"build": "npm run build:types && npm run build:src && npm run build:internal-plugins && npm run build:rawfiles && npm run build:cjs",
"postbuild": "node scripts/output-api-file.js && yarn workspace gatsby-admin build",
"postbuild": "node scripts/output-api-file.js",
Copy link
Contributor Author

@wardpeet wardpeet Feb 16, 2021

Choose a reason for hiding this comment

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

bring back admin

wardpeet
wardpeet commented Feb 16, 2021
View reviewed changes
packages/gatsby/src/utils/webpack-error-utils.ts
return webpackError.map(e => transformWebpackError(stage, e))
}

return transformWebpackError(stage, webpackError)
Copy link
Contributor Author

@wardpeet wardpeet Feb 16, 2021

Choose a reason for hiding this comment

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

Follow up: add formatWebpackMessages

LekoArts
LekoArts reviewed Feb 16, 2021
View reviewed changes
wardpeet
wardpeet commented Feb 16, 2021
View reviewed changes
packages/gatsby/src/utils/webpack-utils.ts
loader: require.resolve(`postcss-loader`),
options: {
ident: `postcss-${++ident}`,
execute: false,
Copy link
Contributor Author

@wardpeet wardpeet Feb 16, 2021

Choose a reason for hiding this comment

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

Try to test with https://github.com/4Catalyzer/astroturf

wardpeet
wardpeet commented Feb 16, 2021
View reviewed changes
wardpeet
wardpeet commented Feb 16, 2021
View reviewed changes
wardpeet
wardpeet commented Feb 16, 2021
View reviewed changes
packages/gatsby/src/utils/webpack/static-query-mapper.ts
return [chunkGroup]
}

let chunkGroups: Array<ChunkGroup> = []
Copy link
Contributor Author

@wardpeet wardpeet Feb 16, 2021

Choose a reason for hiding this comment

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

show exmaple

vladar
vladar previously approved these changes Feb 16, 2021
View reviewed changes
Copy link
Contributor

@vladar vladar left a comment

Choose a reason for hiding this comment

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

🚢

pieh
pieh previously approved these changes Feb 16, 2021
View reviewed changes
@wardpeet wardpeet dismissed stale reviews from pieh and vladar via 8f75ec6 February 16, 2021 21:26
pieh
pieh reviewed Feb 16, 2021
View reviewed changes
pieh
pieh approved these changes Feb 17, 2021
View reviewed changes
Copy link
Contributor

@pieh pieh left a comment

Choose a reason for hiding this comment

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

Yes, It's okay @wardpeet :)

@wardpeet wardpeet merged commit a7a3991 into master Feb 17, 2021
@wardpeet wardpeet deleted the v3/webpack-5 branch February 17, 2021 15:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pieh pieh pieh approved these changes

+2 more reviewers

@LekoArts LekoArts LekoArts left review comments

@vladar vladar vladar approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

topic: webpack/babel Webpack or babel

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@wardpeet @vladar @pieh @LekoArts