Upgrade CRA and webpack to v5 by dylanjeffers · Pull Request #1508 · AudiusProject/audius-client

dylanjeffers · 2022-06-23T16:55:53Z

Description

Attempts to upgrade CRA and webpack to v5

Dragons

Was able to mostly polyfil what we need, so the app doesn't have any strict import errors. The app itself doesn't load currently with an error in the console about express.js

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide repro instructions & any configuration.

How will this change be monitored?

For features that are critical or could fail silently please describe the monitoring/alerting being added.

sliptype · 2022-06-24T14:19:33Z

  "author": "Audius",
  "version": "1.1.10",
  "private": true,
+  "browser": {


I'm not 100% sure this will work. For the sdk rollup we used an "ignore" plugin for rollup that replaces given modules with an empty module. And with metro in react native we mocked modules with empty manually:

https://github.com/AudiusProject/audius-client/blob/main/packages/mobile/metro.config.js#L58

Maybe can do something similar for webpack?

yeah i think youre right, it wasnt helping anyway, just throwing things at the wall! yeah i did end up just doing that for wepack

I believe the browser field is only relevant when the package is a dependency of something else. So if we were importing audius-client somewhere and bundling that

sliptype · 2022-06-29T18:58:35Z

Is this working now?

dylanjeffers · 2022-06-30T16:26:51Z

Is this working now?

yes, wrapping things up into a reviewable state today, thanks for patience

dylanjeffers · 2022-07-05T23:02:27Z

-  // Disabling for now while we upgrade eslint and improve our config
  eslint: {
    enable: false
+  },


on by default, will remove this line

dylanjeffers · 2022-07-05T23:02:40Z

@@ -33,6 +34,7 @@
    "dayjs": "1.10.7",
    "electron-log": "3.0.9",
    "electron-updater": "4.3.5",


dont need this, removing

dylanjeffers · 2022-07-05T23:02:46Z

    "@audius/sdk": "0.0.4",
    "@audius/stems": "1.1.12",
-    "@craco/craco": "6.4.3",
+    "@certusone/wormhole-sdk": "^0.4.4",


also removing

dylanjeffers · 2022-07-05T23:03:05Z

+    "tls": "0.0.1",
    "typed-redux-saga": "1.3.1",
    "typesafe-actions": "5.1.0",
+    "util": "^0.12.4",


can move to devDeps

dylanjeffers · 2022-07-05T23:03:12Z

    "simplebar-react": "2.1.0",
    "simplebar-react-legacy": "npm:simplebar-react@1.2.3",
    "tar": "6.1.11",
+    "tls": "0.0.1",


can move to devDeps

dylanjeffers · 2022-07-05T23:08:53Z

 // Unsure why importing this component first would change that, but it appears to
 // when running in dev mode.
 import Root from './root'
+// import { Root } from './root2'


dylanjeffers · 2022-07-05T23:09:06Z

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react'


raymondjacobson

code looks good.

one weird thing i'm noticing is that when running locally, i see the recaptcha thing show up while the page is loading:

It should be always hidden though: https://github.com/AudiusProject/audius-client/blob/main/packages/web/public/index.html#L183

Very odd. Was trying to repro on a full build, but didn't get that working yet

raymondjacobson · 2022-07-05T23:34:48Z

    "configure-local-env-cloud": "node ./scripts/configureLocalEnv.js --remote-host",
    "publish-scripts": "./scripts/publishScripts.sh",
-    "start": "craco start",
+    "start": "craco --max-old-space-size=8076 start",


did we see OOM on CI? or locally?

raymondjacobson · 2022-07-05T23:35:02Z

    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "abort-controller": "3.0.0",
+    "assert": "^2.0.0",


some deps to pin here pls!

raymondjacobson · 2022-07-05T23:35:14Z


    expect(pause).toBeCalled()
-    setImmediate(() => {
+    setTimeout(() => {


do we lose support for setImmediate?

raymondjacobson · 2022-07-05T23:35:29Z

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react'


reminder to rm

audius-infra · 2022-07-06T19:18:34Z

Preview this change https://demo.audius.co/cra-webpack-v5

audius-infra · 2022-07-07T23:39:19Z

Preview this change https://demo.audius.co/cra-webpack-v5

audius-infra · 2022-07-08T00:35:57Z

Preview this change https://demo.audius.co/cra-webpack-v5

[99a7643] Ignore npm i scripts sliptype [e866679] Commit package changes sliptype [fa71006] Merge branch 'main' into sk-circleci-ssh sliptype [1de7edb] Test ssh key sliptype [89c54b3] Add ssh key sliptype [068c2f4] Fix jitter (#1566) Saliou Diallo [6db7532] [PAY-386] [PAY-387] Created Mobile + Web UIs for First Playlist Challenge (#1565) Reed [0c36c77] [C-667] Fix desktop build on mac (#1564) Raymond Jacobson [ba73747] [C-565] Add chain icon to collectibles card (#1563) Dylan Jeffers [09bb30a] Fix various mobile types (#1562) Dylan Jeffers [85ac517] [PAY-405] Fixed Claim Rewards Pill To Respect Optimizely Config (#1558) Reed [24de5e1] [C-581] Improve probers upload flow a11y (#1561) Dylan Jeffers [3f79f27] [C-575] Fix sentry and dev warnings (#1560) Dylan Jeffers [a533cce] [C-654] Improve web modal usage and performance (#1559) Dylan Jeffers [381cfcc] [C-400] Add logic for mobile app minimum version (#1555) Kyle Shanks [b996975] Upgrade CRA and webpack to v5 (#1508) Dylan Jeffers [981ef8b] [PAY-384] Created First Tip Challenge Mobile UI (#1554) Reed [d271051] Rework CI to use lerna bootstrap and singular npm install (#1553) Raymond Jacobson [0b51b21] v1.1.12 (#1552) Raymond Jacobson [7029175] Move CP of tar file to s3 step (#1550) Raymond Jacobson

[4563c71] Test typo sliptype [99a7643] Ignore npm i scripts sliptype [e866679] Commit package changes sliptype [fa71006] Merge branch 'main' into sk-circleci-ssh sliptype [1de7edb] Test ssh key sliptype [89c54b3] Add ssh key sliptype [068c2f4] Fix jitter (#1566) Saliou Diallo [6db7532] [PAY-386] [PAY-387] Created Mobile + Web UIs for First Playlist Challenge (#1565) Reed [0c36c77] [C-667] Fix desktop build on mac (#1564) Raymond Jacobson [ba73747] [C-565] Add chain icon to collectibles card (#1563) Dylan Jeffers [09bb30a] Fix various mobile types (#1562) Dylan Jeffers [85ac517] [PAY-405] Fixed Claim Rewards Pill To Respect Optimizely Config (#1558) Reed [24de5e1] [C-581] Improve probers upload flow a11y (#1561) Dylan Jeffers [3f79f27] [C-575] Fix sentry and dev warnings (#1560) Dylan Jeffers [a533cce] [C-654] Improve web modal usage and performance (#1559) Dylan Jeffers [381cfcc] [C-400] Add logic for mobile app minimum version (#1555) Kyle Shanks [b996975] Upgrade CRA and webpack to v5 (#1508) Dylan Jeffers [981ef8b] [PAY-384] Created First Tip Challenge Mobile UI (#1554) Reed [d271051] Rework CI to use lerna bootstrap and singular npm install (#1553) Raymond Jacobson [0b51b21] v1.1.12 (#1552) Raymond Jacobson [7029175] Move CP of tar file to s3 step (#1550) Raymond Jacobson

[a326ed1] [PAY-425] Fix optimistic trophy icon for supporting (#1586) Marcus Pasell [f760497] Remove antd table shadow pseudoelements (#1604) Kyle Shanks [6caebfb] Change WRITE_QUORUM_ENABLED to session flag (#1602) Theo Ilie [81837c8] Add shimmer effect to skeleton component (#1583) Kyle Shanks [91d638c] Update explore endpoints in libs to use v1 (#1539) Joseph Lee [bc5a32e] Change logout from sync to async due to SDK changes (#1567) nicoback2 [9ff7510] [PAY-432] Freeze balance briefly after sending a tip (#1599) Michael Piazza [3620262] Add main role (#1597) Sebastian Klingler [5ec991f] [PAY-422] Fix tip icon notification matrix color (#1594) Dylan Jeffers [6523977] [C-677] Fix profile-screen icon hit-slop and color (#1595) Dylan Jeffers [3265713] [C-679] Fix Probers (#1591) Sebastian Klingler [0493d99] [PAY-424] Remove search icon in user-lists (#1596) Dylan Jeffers [68d4ac4] [PAY-423] Fix matrix-mode send-tip web styles (#1593) Dylan Jeffers [fd39136] [PAY-426] Fix native large button icon sizing/spacing (#1592) Dylan Jeffers [b874da7] Limit prod mobile builds to main & release branches (#1590) Sebastian Klingler [462e032] [PAY-393] Fix active state animation on mobile SupportingTile (#1587) Michael Piazza [1f59819] [C-664] Add @audius/common (#1584) Dylan Jeffers [56e2a41] [C-427] Fix matrix mode color for dismiss feed-tip-tile button (#1588) Dylan Jeffers [8b74c18] Fix entity and solana types in web (#1585) Dylan Jeffers [3301e27] Fix sdk lazyload and upgrade to sdk 0.0.12 (#1581) Sebastian Klingler [c91f722] [CON-234] Add write quorum feature flag (#1576) Theo Ilie [e7dc144] Fix native milestone notification (#1575) Dylan Jeffers [9af0e95] [PAY-399] Fix reaction notification selection bug (#1573) Dylan Jeffers [13db0db] [C-674] Upgrade eslint, prettier, and plugins to latest (#1578) Dylan Jeffers [0285c7e] [PAY-414] Fix unsending reactions (#1582) Michael Piazza [dee8c96] Fix solana phantom provider types (#1580) Raymond Jacobson [29f97db] Fix solana sign message for Brave (#1579) Raymond Jacobson [6848f81] [PAY-415] Clicking tipping notifications goes to profile (#1574) Dylan Jeffers [ae44d1c] [C-409] Add eslint-config-audius, use in packages (#1570) Dylan Jeffers [8e39c2c] Fix sign-on action types (#1571) Dylan Jeffers [c3fb7f9] Remove extra lint step (#1572) Sebastian Klingler [ca26a53] Add ssh key for audius-infra write access (#1569) Sebastian Klingler [71fe7a8] [C-402] Add min version logic for the desktop app (#1568) Kyle Shanks [068c2f4] Fix jitter (#1566) Saliou Diallo [6db7532] [PAY-386] [PAY-387] Created Mobile + Web UIs for First Playlist Challenge (#1565) Reed [0c36c77] [C-667] Fix desktop build on mac (#1564) Raymond Jacobson [ba73747] [C-565] Add chain icon to collectibles card (#1563) Dylan Jeffers [09bb30a] Fix various mobile types (#1562) Dylan Jeffers [85ac517] [PAY-405] Fixed Claim Rewards Pill To Respect Optimizely Config (#1558) Reed [24de5e1] [C-581] Improve probers upload flow a11y (#1561) Dylan Jeffers [3f79f27] [C-575] Fix sentry and dev warnings (#1560) Dylan Jeffers [a533cce] [C-654] Improve web modal usage and performance (#1559) Dylan Jeffers [381cfcc] [C-400] Add logic for mobile app minimum version (#1555) Kyle Shanks [b996975] Upgrade CRA and webpack to v5 (#1508) Dylan Jeffers [981ef8b] [PAY-384] Created First Tip Challenge Mobile UI (#1554) Reed [d271051] Rework CI to use lerna bootstrap and singular npm install (#1553) Raymond Jacobson [0b51b21] v1.1.12 (#1552) Raymond Jacobson [7029175] Move CP of tar file to s3 step (#1550) Raymond Jacobson

pull-request-size Bot added the size/L label Jun 23, 2022

dylanjeffers requested review from jowlee, raymondjacobson and sliptype and removed request for raymondjacobson June 23, 2022 16:55

sliptype reviewed Jun 24, 2022

View reviewed changes

dylanjeffers marked this pull request as ready for review June 27, 2022 15:31

dylanjeffers added 9 commits July 5, 2022 14:44

Upgrade CRA and webpack to v5

f577006

Replace craco with react-app-rewired, remove errors, get running

f384ab5

Fix tests, add overrides

4161a36

Replace rewired with craco

9b6b21f

Fix mobile build

3dc4d45

Remove node polyfill webpack plugin

747d71f

Okay this is looking okay

d9edf86

added some more, things still kinda broken though

8de7c38

Improve install process

95258c4

dylanjeffers force-pushed the cra-webpack-v5 branch from 93d520f to 95258c4 Compare July 5, 2022 23:00

Remove incorrect browser config

81afa02

dylanjeffers commented Jul 5, 2022

View reviewed changes

raymondjacobson approved these changes Jul 5, 2022

View reviewed changes

Final changes

107edae

dylanjeffers added 10 commits July 5, 2022 23:05

Fix visualizer

46b8f2b

remove npm link

c4f79cf

Fix tests

4061c2e

Dedupe react

dd80036

Fix jest

bb3ff4d

Persist root node_modules

7956708

Merge branch 'main' into cra-webpack-v5

9524138

Add plugin-css-modules to fix web build

5ac1351

See if declaring css explicitly works?

63ba916

Remove typecheck on build

8fbd744

dylanjeffers added 7 commits July 6, 2022 16:21

Add react back into each project, fix aliasing issues

da13c47

Merge branch 'main' into cra-webpack-v5

6e2d70b

Fix lock

e2de0de

Remove .yml changes

0306ba5

Fix lock, stems double build

db81dc0

Remove cache fallback

2964083

Temp remove tests for web

cbb42ab

Downgrade color

1ef1a2d

dylanjeffers merged commit b996975 into main Jul 8, 2022

dylanjeffers deleted the cra-webpack-v5 branch July 8, 2022 00:59

Conversation

dylanjeffers commented Jun 23, 2022

Description

Dragons

How Has This Been Tested?

How will this change be monitored?

Uh oh!

sliptype Jun 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sliptype commented Jun 29, 2022

Uh oh!

dylanjeffers commented Jun 30, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

raymondjacobson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

audius-infra commented Jul 6, 2022

Uh oh!

audius-infra commented Jul 7, 2022

Uh oh!

audius-infra commented Jul 8, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sliptype Jun 24, 2022 •

edited

Loading