upgrading webpack to latest and all it's dependencies
AbandonedPublic
Actions

Authored by darn-it-dan on Jan 20 2022, 16:56.

Details

Reviewers

Group Reviewers

Restricted Owners Package	(Owns No Changed Paths)
Restricted Project

Summary

Upgrading webpack to latest.

Because webpack 5 has breaking changes, there was a lot of changes required in the configurations.

Also it required a lot of upgrades to different npms such as eslint and loaders.

Also to keep the project working in an expected way, I copy and pasted the config folder from a freshly created and ejected Create React App.

I looked into plugging in our application into a Create React App but we have a feature set in our webpack config that can only be done through a custom webpack config.

That feature being importing images through absolute paths. (this can only be done with webpack but you can load js / ts files using absolute paths without configuring webpack)

This is a very minor feature provided to use by webpack, but other than this, we can abstract away all of webpack with create-react-app.

So sum up the trade off:

Give up absolute imports of images so we can plug our app into a Create React Template

Keep absolute imports of images but always deal with the complications of an ejected react app.

Also sorry this revision is very big, if you have any idea of how to break this up, let me know.

Test Plan

webpack is kind of a pain so we have to test a few things.

building for development
development runtime
building for production
production runtime
test suite

bash
npm i
npm start # check that it builds correctly for development
# check the app in browser and make sure it runs

# then stop the dev server

# check if project builds for production
npm run build
npm install -g serve
serve -s build 

# check browser of production build and make sure app runs smoothly

# then finally
npm test

# make sure all tests pass

Diff Detail

Repository

rABC Bitcoin ABC

Branch

upgrade-webpack

Lint

Lint Warnings

Severity	Location	Code	Message
Warning	web/cashtab/package-lock.json:23650	SPELL2	Possible Spelling Mistake
Warning	web/cashtab/package-lock.json:45651	SPELL2	Possible Spelling Mistake

Unit

No Test Coverage

Build Status

Buildable 17954
Build 35730: Build Diff	cashtab-tests
Build 35729: arc lint + arc unit

Event Timeline

darn-it-dan created this revision.Jan 20 2022, 16:56

Owners added a reviewer: Restricted Owners Package.Jan 20 2022, 16:56

Herald added a reviewer: Restricted Project. · View Herald TranscriptJan 20 2022, 16:56

darn-it-dan requested review of this revision.Jan 20 2022, 16:56

Harbormaster completed remote builds in B17954: Diff 31871.Jan 20 2022, 16:56

darn-it-dan edited the summary of this revision. (Show Details)Jan 20 2022, 16:58

darn-it-dan edited the test plan for this revision. (Show Details)

Build Bitcoin ABC Diffs / Diff Testing (cashtab-tests) failed.

Tail of the build log:

Failed to parse source map from '/work/web/cashtab/node_modules/react-image/umd/index.js.map' file: Error: ENOENT: no such file or directory, open '/work/web/cashtab/node_modules/react-image/umd/index.js.map'

src/components/App.js
  Line 1:27:    'useEffect' is defined but never used                  no-unused-vars
  Line 3:10:    'Modal' is defined but never used                      no-unused-vars
  Line 301:59:  'match' is missing in props validation                 react/prop-types
  Line 301:65:  'match.params' is missing in props validation          react/prop-types
  Line 301:72:  'match.params.tokenId' is missing in props validation  react/prop-types

src/components/Authentication/ProtectableComponentWrapper.js
  Line 6:40:  'children' is missing in props validation  react/prop-types

src/components/Common/QRCode.js
  Line 142:5:   'address' is missing in props validation         react/prop-types
  Line 143:5:   'isCashAddress' is missing in props validation   react/prop-types
  Line 144:5:   'size' is missing in props validation            react/prop-types
  Line 145:5:   'onClick' is missing in props validation         react/prop-types
  Line 146:8:   'otherProps' is defined but never used           no-unused-vars
  Line 152:44:  'address.length' is missing in props validation  react/prop-types
  Line 153:44:  'address.split' is missing in props validation   react/prop-types
  Line 235:38:  'address.slice' is missing in props validation   react/prop-types
  Line 238:38:  'address.slice' is missing in props validation   react/prop-types
  Line 243:34:  'address.slice' is missing in props validation   react/prop-types
  Line 245:38:  'address.slice' is missing in props validation   react/prop-types

src/components/Common/ScanQRCode.js
  Line 133:9:  Definition for rule 'react-hooks/exhaustive-deps' was not found  react-hooks/exhaustive-deps

src/components/Configure/Configure.js
  Line 1:1:     Definition for rule 'react-hooks/exhaustive-deps' was not found  react-hooks/exhaustive-deps
  Line 463:43:  'e' is defined but never used                                    no-unused-vars

src/components/Send/Send.js
  Line 483:11:  'handleOneToManyXECSend' is assigned a value but never used  no-unused-vars

src/components/Tokens/CreateTokenForm.js
  Line 26:5:    'notification' is defined but never used  no-unused-vars
  Line 206:36:  'file' is defined but never used          no-unused-vars

src/components/Wallet/Wallet.js
  Line 54:19:  'props' is defined but never used  no-unused-vars

src/hooks/useWallet.js
  Line 1:1:  Definition for rule 'react-hooks/exhaustive-deps' was not found  react-hooks/exhaustive-deps

src/hooks/useWebAuthentication.js
  Line 181:13:  Unnecessary try/catch wrapper  no-useless-catch
  Line 204:13:  Unnecessary try/catch wrapper  no-useless-catch

src/utils/GoogleAnalytics.js
  Line 53:15:  'options' is assigned a value but never used  no-unused-vars

src/utils/context.js
  Line 5:34:   'children' is missing in props validation  react/prop-types
  Line 17:42:  'children' is missing in props validation  react/prop-types

Search for the keywords to learn more about each error.


Build cashtab-tests failed with exit code 1

darn-it-dan edited the test plan for this revision. (Show Details)Jan 20 2022, 16:59

Give up absolute imports of images so we can plug our app into a Create React Template
or
Keep absolute imports of images but always deal with the complications of an ejected react app.

Looking at the size of this diff, I think we should go with option A: "Give up absolute imports of images so we can plug our app into a Create React Template"

That way, the bulk of the diff will be removing mostly obsolete boilerplate code associated with ejecting this react app years ago.

This revision now requires changes to proceed.Jan 20 2022, 17:24

sounds good,

abandoning revision.