Page MenuHomePhabricator

Upgrade to Webpack 5
Closed, ResolvedPublic

Description

Cashtab's dependency tree should be upgraded to the latest available software with all conflicts resolved. Build scripts should include no artifacts from deprecated features.

Related Objects

Mentioned In
rABCd2cc398537a8: [Cashtab] Finalize webpack upgrade
D11275: [Cashtab] Finalize webpack upgrade
rABCe6ed701c401d: [Cashtab] Webpack upgrade for extension script
D11270: [Cashtab] Webpack upgrade for extension script
rABCeb2b900f752f: [Cashtab] Support migration to jest 27
D11255: [Cashtab] Support migration to jest 27
rABC61b1431178bd: [Cashtab] webpack upgrade p13
D11254: [Cashtab] webpack upgrade p13
rABC0de40b6c9e0a: [Cashtab] Webpack upgrade p10, first working version
D11250: [Cashtab] Webpack upgrade p10, first working version
rABC286e98f07063: [Cashtab] Webpack upgrade part 9, fix import order
D11249: [Cashtab] Webpack upgrade part 9, fix import order
rABCe2c14a99e00e: [Cashtab] Webpack upgrade part 8, rework absolute imports
D11248: [Cashtab] Webpack upgrade part 8, rework absolute imports
rABCfb28c4806c61: [Cashtab] Webpack upgrade step 7, add scripts to package.json
D11247: [Cashtab] Webpack upgrade step 7, add scripts to package.json
rABC05a1bac5b1f5: [Cashtab] Webpack upgrade part 6, feature freeze and source code copy
D11246: [Cashtab] Webpack upgrade part 6, feature freeze and source code copy
rABC08c29ad8d949: [Cashtab] Webpack upgrade, part 5
D11233: [Cashtab] Webpack upgrade, part 5
rABCdd0095764e9d: [Cashtab] Webpack upgrade part 4, dependencies
D11200: [Cashtab] Webpack upgrade part 4, dependencies
rABC93147d99ed25: [Cashtab] Webpack upgrade part 3, polyfill support
D11152: [Cashtab] Webpack upgrade part 3, polyfill support
rABCab711d137806: [Cashtab] Webpack upgrade part 2, ejecting create react app
D11143: [Cashtab] Webpack upgrade part 2, ejecting create react app
rABCaa353ed2dc00: [Cashtab] Webpack upgrade part 1
D11053: [Cashtab] Update node-fetch
D11120: [Cashtab] Webpack upgrade part 1
D11099: [Cashtab] Upgrading to webpack 5 [TEST]
D11068: [Cashtab] Rebuild with latest version of create react app

Event Timeline

bytesofman triaged this task as High priority.Aug 3 2021, 20:07
bytesofman created this task.
Klakurka edited projects, added Restricted Project; removed Restricted Project.Aug 6 2021, 01:44
bytesofman moved this task from Restricted Project Column to Restricted Project Column on the Restricted Project board.Aug 10 2021, 17:36

Can get this to work by starting with a fresh install of CRA v5. However, does still need to be injected to support polyfills required by some dependencies. Still, much cleaner than what we have now.

Fixes the ongoing dev issues with the app crashing, and also some of the dependency issues coming from dependabot.

Will get this in after the new UI lands.

This is a pretty significant overhaul. It will need to be done during an announced feature freeze, and will require a good deal of testing to make sure performance is not impacted.

Here is a guide to how to do this. Putting it here so it can be amended if improvements are discovered and referenced when it's time to pull this off.

  1. Navigate to /web/ and create a new react app with the latest version of create-react-app (using the latest stable release of nodejs)
cd web
nvm use 16
npx create-react-app cashtab-v2
  1. Eject the app (Ideally, we would not need to eject. However, this step is required due to some polyfill support that is no longer standard in create react app)

Note: React will not let you eject without first committing your files

cd cashtab-v2
git add .
git commit -m '[Cashtab] Upgrading to webpack 5'
npm run eject
  1. Add webpack polyfills

a) Install modules required for polyfills

npm i stream-browserify crypto-browserify buffer

b) Add this into cashtab-v2/config/webpack.config.js at line 301, before the line reading // This allows you to set a fallback for where webpack should look for modules.

fallback: {
                stream: require.resolve('stream-browserify'),
                crypto: require.resolve('crypto-browserify'),
                buffer: require.resolve('buffer'),
            },

c) Add this on line 587 of the same file, before the line reading

// Generates an `index.html` file with the <script> injected.
// Work around for Buffer is undefined:
            // https://github.com/webpack/changelog-v5/issues/10
            new webpack.ProvidePlugin({
                Buffer: ['buffer', 'Buffer'],
            }),
  1. Add the following dependencies to web/cashtab-v2/package.json [Note: this is a list of dependencies used by Cashtab and not related to react in the current deployment]
"@ant-design/icons": "^4.3.0",
"@zxing/library": "0.8.0",
"antd": "^4.9.3",
"bignumber.js": "^9.0.0",
"ecashaddrjs": "^1.0.1",
"ecies-lite": "^1.0.7",
"etoken-list": "^1.0.1",
"ethereum-blockies-base64": "^1.0.2",
"localforage": "^1.9.0",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"minimal-slp-wallet": "^3.3.1",
"qrcode.react": "^1.0.0",
"react-copy-to-clipboard": "^5.0.3",
"react-device-detect": "^1.15.0",
"react-easy-crop": "^3.5.3",
"react-ga": "^3.3.0",
"react-image": "^4.0.3",
"react-router-dom": "^5.2.0",
"styled-components": "^4.4.0",
"@testing-library/react-hooks": "^3.7.0",
"wif": "^2.0.6"

Then, install them with

npm i

  1. Delete create-react-app defaults that you will not use from cashtab-v2
cd web/cashtab-v2
rm -rf src/ public/ README.md .gitignore
  1. Copy over all files from web/cashtab to web/cashtab-v2 with the exception of package.json, package-lock.json, build/, coverage/, scripts/, (though you want scripts/addGenerated.sh and scripts/extension.sh), and node_modules
cd web/cashtab-v2
rsync -av --progress ../cashtab/ . --exclude node_modules/ --exclude build/ --exclude coverage/ --exclude scripts/ --exclude config/ --exclude package-lock.json --exclude package.json
cp ../cashtab/scripts/addGenerated.sh scripts/
cp ../cashtab/scripts/extension.sh scripts/
  1. Add required npm scripts to package.json

Add to the scripts: {} object:

"preextension": "npm  i -g browserify",
"extension": "./scripts/extension.sh",
"posttest": "./scripts/addGenerated.sh",
  1. Use the jsconfig approach for absolute imports (the @ approach used in the current version of Cashtab does not work with the latest create react app). This is also a cleaner way of handling absolute imports. Unfortunately, it requires some manual implementation (todo: script this)
cd /web/cashtab-v2
touch jsconfig.json

Contents of jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

To use scripted find and replace:

cd web/cashtab-v2/src/
find . -type f -exec sed -i 's/@components/components/g' {} +
find . -type f -exec sed -i 's/@assets/assets/g' {} +
find . -type f -exec sed -i 's/@utils/utils/g' {} +
find . -type f -exec sed -i 's/@hooks/hooks/g' {} +

cd web/cashtab-v2/extension/
find . -type f -exec sed -i 's/@components/components/g' {} +
find . -type f -exec sed -i 's/@assets/assets/g' {} +
find . -type f -exec sed -i 's/@utils/utils/g' {} +
find . -type f -exec sed -i 's/@hooks/hooks/g' {} +
  1. Four files error out in newer versions of react because they assign some variables before future import statements. Edit these files to make sure all import statements are at the top.

a. src/components/common/EnhancedInputs.js
b. src/components/Send/Send.js
c. src/components/Tokens/CreateTokenForm.js
d. src/utils/context.js

  1. Remove inputs from src/components/App.css and extension/src/components/App.css

Delete these lines from the top of each file:

@import '~antd/dist/antd.less';
@import '~@fortawesome/fontawesome-free/css/all.css';
@import url('https://fonts.googleapis.com/css?family=Khula&display=swap&.css');
  1. Add css import to index.js (since it's not working from the css page)

Add this line to end of imports in index.js

import 'antd/dist/antd.css';
  1. Delete unit tests for useWallet.js and create a task to bring them back modified for Jest 27
  1. CSS tweaks to handle absence of less-loader

a) In src/components/EnhancedInputs.js,

change

.ant-input-affix-wrapper {
        background-color: ${props =>
            props.theme.forms.selectionBackground};
        border: 1px solid ${props => props.theme.forms.border} !important;
    }

to

.ant-input-affix-wrapper {
        background-color: ${props =>
            props.theme.forms.selectionBackground} !important;
        border: 1px solid ${props => props.theme.forms.border} !important;
    }

b) Note that now error messages are red, not the proper theme.forms.error; explore patching this with css or create a task

c) Note that styled collapse menus (on Send.js and Configure.js) are not the same styling, though still okay. Create a task to restore.

d) Note switch colors on select are also different, though serviceable. Create a task to restore.

e) Note that toggling between send to one and send to many now has a content jump. Create a task to restore.

  1. Can push the diff up like this for testing. Or, delete the cashtab folder and then rename cashtab-v2 to cashtab.

Updated info from practical testing

  • Some jest errors related to conflicts with antd, create tasks to resolve (antd still to be deprecated)
  • Need to make sure that addGenerated.sh references the correct directory when you replace legacy folder