Page MenuHomePhabricator
Differential D6699

Update to Webpack 5
ClosedPublic
Actions

Authored by ashoat on Feb 12 2023, 6:47 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Apr 12, 3:11 PM
Unknown Object (File)
Fri, Apr 11, 4:58 PM
Unknown Object (File)
Fri, Apr 11, 2:00 PM
Unknown Object (File)
Fri, Apr 11, 3:25 AM
Unknown Object (File)
Wed, Apr 9, 10:58 PM
Unknown Object (File)
Tue, Apr 1, 11:44 AM
Unknown Object (File)
Mon, Mar 24, 1:07 PM
Unknown Object (File)
Mar 21 2025, 8:49 AM
View All Files
Subscribers
None

Details

Reviewers
atul
tomek
Commits
rCOMM9d946bde0a68: Update to Webpack 5
Summary

I followed the official docs to update to Webpack 5. Details will be explained inline.

Depends on D6698

Test Plan
  1. I tested dev build in web via yarn dev in web + keyserver and then tested the website
  2. I tested prod build by running yarn prod in web and then tested the website by running keyserver with yarn prod-build && yarn-prod
  3. I tested native, just in case

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ashoat created this revision.Feb 12 2023, 6:47 PM
ashoat added a child revision: D6700: Specify removeFullPathAutoPrefix to assets-webpack-plugin.
Harbormaster returned this revision to the author for changes because remote builds failed.Feb 12 2023, 6:59 PM
Harbormaster failed remote builds in B16351: Diff 22353!
ashoat requested review of this revision.Feb 12 2023, 7:20 PM

Please ignore failing CI – it's intentional, otherwise this diff would be too big and difficult to review

keyserver/src/responders/landing-handler.js
99 ↗(On Diff #22353)

After updating to Webpack 5, this appears to be how we need to access a Webpack-built commonjs bundle from ESM code

keyserver/src/responders/website-responders.js
111 ↗(On Diff #22353)

After updating to Webpack 5, this appears to be how we need to access a Webpack-built commonjs bundle from ESM code

landing/webpack.config.cjs
17 ↗(On Diff #22353)

From upgrade guide:

When using [hash] placeholder in webpack configuration, consider changing it to [contenthash]. It is not the same, but proven to be more effective.

lib/webpack/shared.cjs
19 ↗(On Diff #22353)

From upgrade guide:

When using [hash] placeholder in webpack configuration, consider changing it to [contenthash]. It is not the same, but proven to be more effective.

web/webpack.config.cjs
28 ↗(On Diff #22353)

From upgrade guide:

When using [hash] placeholder in webpack configuration, consider changing it to [contenthash]. It is not the same, but proven to be more effective.

36–38 ↗(On Diff #22353)

For context on why I was comfortable adding empty objects for crypto and path, see the investigation on this Linear task

37 ↗(On Diff #22353)

This got migrated to fs: false on the right

atul accepted this revision.Feb 12 2023, 7:31 PM
This revision is now accepted and ready to land.Feb 12 2023, 7:31 PM
This revision was landed with ongoing or failed builds.Feb 12 2023, 8:08 PM
Closed by commit rCOMM9d946bde0a68: Update to Webpack 5 (authored by ashoat). · Explain Why
This revision was automatically updated to reflect the committed changes.
ashoat added a commit: rCOMM9d946bde0a68: Update to Webpack 5.

Revision Contents
Changeset List

PathSize
keyserver/
src/
responders/
2 lines
2 lines
landing/
2 lines
2 lines
lib/
flow-typed/
npm/
web/
flow-typed/
npm/
webpack_v5.x.x.js
webpack_v4.x.x.js
388 lines
lib/
2 lines
webpack/
2 lines
web/
flow-typed/
npm/
2 lines
10 lines
1135 lines

Diff 22383

View Options

keyserver/src/responders/landing-handler.js

// @flow // @flow
import html from 'common-tags/lib/html/index.js'; import html from 'common-tags/lib/html/index.js';
import { detect as detectBrowser } from 'detect-browser'; import { detect as detectBrowser } from 'detect-browser';
import type { $Response, $Request } from 'express'; import type { $Response, $Request } from 'express';
import fs from 'fs'; import fs from 'fs';
import _isEqual from 'lodash/fp/isEqual.js'; import _isEqual from 'lodash/fp/isEqual.js';
import _keyBy from 'lodash/fp/keyBy.js'; import _keyBy from 'lodash/fp/keyBy.js';
import * as React from 'react'; import * as React from 'react';
// eslint-disable-next-line import/extensions // eslint-disable-next-line import/extensions
import ReactDOMServer from 'react-dom/server'; import ReactDOMServer from 'react-dom/server';
import t from 'tcomb'; import t from 'tcomb';
import { promisify } from 'util'; import { promisify } from 'util';
import { inviteLinkUrl } from 'lib/facts/links.js'; import { inviteLinkURL } from 'lib/facts/links.js';
import { baseLegalPolicies } from 'lib/facts/policies.js'; import { baseLegalPolicies } from 'lib/facts/policies.js';
import stores from 'lib/facts/stores.js'; import stores from 'lib/facts/stores.js';
import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js'; import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js';
import { freshMessageStore } from 'lib/reducers/message-reducer.js'; import { freshMessageStore } from 'lib/reducers/message-reducer.js';
import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js'; import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js';
import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js'; import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js';
import { import {
threadHasPermission, threadHasPermission,
▲ Show 20 Lines • Show All 775 Lines • ▼ Show 20 Lines <html lang="en">
</section> </section>
<p> <p>
To join this community, download the Comm app and reopen this invite To join this community, download the Comm app and reopen this invite
link link
</p> </p>
<div class="separator"></div> <div class="separator"></div>
<section class="buttons"> <section class="buttons">
<a class="button" href="${stores.appStoreUrl}">Download Comm</a> <a class="button" href="${stores.appStoreUrl}">Download Comm</a>
<a class="button secondary" href="${inviteLinkUrl(secret)}"> <a class="button secondary" href="${inviteLinkURL(secret)}">
Invite Link Invite Link
</a> </a>
</section> </section>
</section> </section>
<a class="link" href="https://comm.app/"> <a class="link" href="https://comm.app/">
<span class="link-text">Visit Comm’s website</span> <span class="link-text">Visit Comm’s website</span>
<img <img
src="/images/arrow_up_right.svg" src="/images/arrow_up_right.svg"
Show All 10 Lines
View Options

keyserver/src/responders/website-responders.js

// @flow // @flow
import html from 'common-tags/lib/html/index.js'; import html from 'common-tags/lib/html/index.js';
import { detect as detectBrowser } from 'detect-browser'; import { detect as detectBrowser } from 'detect-browser';
import type { $Response, $Request } from 'express'; import type { $Response, $Request } from 'express';
import fs from 'fs'; import fs from 'fs';
import _isEqual from 'lodash/fp/isEqual.js'; import _isEqual from 'lodash/fp/isEqual.js';
import _keyBy from 'lodash/fp/keyBy.js'; import _keyBy from 'lodash/fp/keyBy.js';
import * as React from 'react'; import * as React from 'react';
// eslint-disable-next-line import/extensions // eslint-disable-next-line import/extensions
import ReactDOMServer from 'react-dom/server'; import ReactDOMServer from 'react-dom/server';
import t from 'tcomb'; import t from 'tcomb';
import { promisify } from 'util'; import { promisify } from 'util';
import { inviteLinkUrl } from 'lib/facts/links.js'; import { inviteLinkURL } from 'lib/facts/links.js';
import { baseLegalPolicies } from 'lib/facts/policies.js'; import { baseLegalPolicies } from 'lib/facts/policies.js';
import stores from 'lib/facts/stores.js'; import stores from 'lib/facts/stores.js';
import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js'; import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js';
import { freshMessageStore } from 'lib/reducers/message-reducer.js'; import { freshMessageStore } from 'lib/reducers/message-reducer.js';
import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js'; import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js';
import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js'; import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js';
import { import {
threadHasPermission, threadHasPermission,
▲ Show 20 Lines • Show All 775 Lines • ▼ Show 20 Lines <html lang="en">
</section> </section>
<p> <p>
To join this community, download the Comm app and reopen this invite To join this community, download the Comm app and reopen this invite
link link
</p> </p>
<div class="separator"></div> <div class="separator"></div>
<section class="buttons"> <section class="buttons">
<a class="button" href="${stores.appStoreUrl}">Download Comm</a> <a class="button" href="${stores.appStoreUrl}">Download Comm</a>
<a class="button secondary" href="${inviteLinkUrl(secret)}"> <a class="button secondary" href="${inviteLinkURL(secret)}">
Invite Link Invite Link
</a> </a>
</section> </section>
</section> </section>
<a class="link" href="https://comm.app/"> <a class="link" href="https://comm.app/">
<span class="link-text">Visit Comm’s website</span> <span class="link-text">Visit Comm’s website</span>
<img <img
src="/images/arrow_up_right.svg" src="/images/arrow_up_right.svg"
Show All 10 Lines
View Options

landing/package.json

// @flow // @flow
import html from 'common-tags/lib/html/index.js'; import html from 'common-tags/lib/html/index.js';
import { detect as detectBrowser } from 'detect-browser'; import { detect as detectBrowser } from 'detect-browser';
import type { $Response, $Request } from 'express'; import type { $Response, $Request } from 'express';
import fs from 'fs'; import fs from 'fs';
import _isEqual from 'lodash/fp/isEqual.js'; import _isEqual from 'lodash/fp/isEqual.js';
import _keyBy from 'lodash/fp/keyBy.js'; import _keyBy from 'lodash/fp/keyBy.js';
import * as React from 'react'; import * as React from 'react';
// eslint-disable-next-line import/extensions // eslint-disable-next-line import/extensions
import ReactDOMServer from 'react-dom/server'; import ReactDOMServer from 'react-dom/server';
import t from 'tcomb'; import t from 'tcomb';
import { promisify } from 'util'; import { promisify } from 'util';
import { inviteLinkUrl } from 'lib/facts/links.js'; import { inviteLinkURL } from 'lib/facts/links.js';
import { baseLegalPolicies } from 'lib/facts/policies.js'; import { baseLegalPolicies } from 'lib/facts/policies.js';
import stores from 'lib/facts/stores.js'; import stores from 'lib/facts/stores.js';
import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js'; import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js';
import { freshMessageStore } from 'lib/reducers/message-reducer.js'; import { freshMessageStore } from 'lib/reducers/message-reducer.js';
import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js'; import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js';
import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js'; import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js';
import { import {
threadHasPermission, threadHasPermission,
▲ Show 20 Lines • Show All 775 Lines • ▼ Show 20 Lines <html lang="en">
</section> </section>
<p> <p>
To join this community, download the Comm app and reopen this invite To join this community, download the Comm app and reopen this invite
link link
</p> </p>
<div class="separator"></div> <div class="separator"></div>
<section class="buttons"> <section class="buttons">
<a class="button" href="${stores.appStoreUrl}">Download Comm</a> <a class="button" href="${stores.appStoreUrl}">Download Comm</a>
<a class="button secondary" href="${inviteLinkUrl(secret)}"> <a class="button secondary" href="${inviteLinkURL(secret)}">
Invite Link Invite Link
</a> </a>
</section> </section>
</section> </section>
<a class="link" href="https://comm.app/"> <a class="link" href="https://comm.app/">
<span class="link-text">Visit Comm’s website</span> <span class="link-text">Visit Comm’s website</span>
<img <img
src="/images/arrow_up_right.svg" src="/images/arrow_up_right.svg"
Show All 10 Lines
View Options

landing/webpack.config.cjs

// @flow // @flow
import html from 'common-tags/lib/html/index.js'; import html from 'common-tags/lib/html/index.js';
import { detect as detectBrowser } from 'detect-browser'; import { detect as detectBrowser } from 'detect-browser';
import type { $Response, $Request } from 'express'; import type { $Response, $Request } from 'express';
import fs from 'fs'; import fs from 'fs';
import _isEqual from 'lodash/fp/isEqual.js'; import _isEqual from 'lodash/fp/isEqual.js';
import _keyBy from 'lodash/fp/keyBy.js'; import _keyBy from 'lodash/fp/keyBy.js';
import * as React from 'react'; import * as React from 'react';
// eslint-disable-next-line import/extensions // eslint-disable-next-line import/extensions
import ReactDOMServer from 'react-dom/server'; import ReactDOMServer from 'react-dom/server';
import t from 'tcomb'; import t from 'tcomb';
import { promisify } from 'util'; import { promisify } from 'util';
import { inviteLinkUrl } from 'lib/facts/links.js'; import { inviteLinkURL } from 'lib/facts/links.js';
import { baseLegalPolicies } from 'lib/facts/policies.js'; import { baseLegalPolicies } from 'lib/facts/policies.js';
import stores from 'lib/facts/stores.js'; import stores from 'lib/facts/stores.js';
import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js'; import { daysToEntriesFromEntryInfos } from 'lib/reducers/entry-reducer.js';
import { freshMessageStore } from 'lib/reducers/message-reducer.js'; import { freshMessageStore } from 'lib/reducers/message-reducer.js';
import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js'; import { mostRecentlyReadThread } from 'lib/selectors/thread-selectors.js';
import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js'; import { mostRecentMessageTimestamp } from 'lib/shared/message-utils.js';
import { import {
threadHasPermission, threadHasPermission,
▲ Show 20 Lines • Show All 775 Lines • ▼ Show 20 Lines <html lang="en">
</section> </section>
<p> <p>
To join this community, download the Comm app and reopen this invite To join this community, download the Comm app and reopen this invite
link link
</p> </p>
<div class="separator"></div> <div class="separator"></div>
<section class="buttons"> <section class="buttons">
<a class="button" href="${stores.appStoreUrl}">Download Comm</a> <a class="button" href="${stores.appStoreUrl}">Download Comm</a>
<a class="button secondary" href="${inviteLinkUrl(secret)}"> <a class="button secondary" href="${inviteLinkURL(secret)}">
Invite Link Invite Link
</a> </a>
</section> </section>
</section> </section>
<a class="link" href="https://comm.app/"> <a class="link" href="https://comm.app/">
<span class="link-text">Visit Comm’s website</span> <span class="link-text">Visit Comm’s website</span>
<img <img
src="/images/arrow_up_right.svg" src="/images/arrow_up_right.svg"
Show All 10 Lines
View Options

lib/flow-typed/npm/webpack_v5.x.x.js

Loading...
View Options

lib/package.json

Loading...
View Options

lib/webpack/shared.cjs

Loading...
View Options

web/flow-typed/npm/webpack_v4.x.x.js

Loading...
View Options

web/package.json

Loading...
View Options

web/webpack.config.cjs

Loading...
View Options

yarn.lock

Loading...