Chore - Update bulk with the latest webpack and its dependencies

ke4 commented 9 months ago

Current bulk expression atlas is using outdated webpack version and we also need to update the dependent libraries. Currently it is using these dev dependencies:

"devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.6",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "@ebi-gene-expression-group/eslint-config-gene-expression": "^0.6.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "eslint": "^6.8.0",
    "file-loader": "^4.3.0",
    "image-webpack-loader": "^6.0.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-bundle-analyzer": "^3.7.0",
    "webpack-cli": "^3.3.11"
  }

Please update these to the latest versions, deploy the web app 1st locally, 2nd to the test server and test it.

Subtasks:

[ ] Update the dependencies in the package.json file
[ ] Build, deploy, execute and test the web app locally
[ ] Build, deploy, execute and test the web app on our test env: http://ves-hx-77:8080/gxa/
[ ] Remove the related session (Known Build Issue) from the README's troubleshooting session

ke4 commented 8 months ago

I created a PR earlier that was reverted later: https://github.com/ebi-gene-expression-group/atlas-web-bulk/pull/166/files In this PR you can probably reuse these files (maybe need some additional modification, too):

app/src/main/javascript/package.json
app/src/main/javascript/webpack.config.js

lingyun1010 commented 6 months ago

We have a bunch of stale dependencies like below

 @babel/cli                  ^7.8.4  →   ^7.24.5
 @babel/core                 ^7.9.6  →   ^7.24.5
 @babel/preset-env           ^7.9.6  →   ^7.24.5
 @babel/preset-react         ^7.9.4  →   ^7.24.1
 babel-loader                ^8.1.0  →    ^9.1.3
 clean-webpack-plugin        ^3.0.0  →    ^4.0.0
 color                       ^3.1.2  →    ^4.2.3
 css-loader                  ^3.5.3  →    ^7.1.1
 eslint                      ^6.8.0  →    ^9.1.1
 file-loader                 ^4.3.0  →    ^6.2.0
 highcharts                  ^6.2.0  →   ^11.4.1
 highcharts-custom-events    ^3.0.4  →   ^3.0.10
 image-webpack-loader        ^6.0.0  →    ^8.1.0
 lodash                    ^4.17.15  →  ^4.17.21
 object-hash                 ^2.0.3  →    ^3.0.0
 prop-types                 ^15.7.2  →   ^15.8.1
 rc-slider                   ^8.7.1  →   ^10.6.2
 react                     ^16.13.1  →   ^18.3.1
 react-bootstrap            ^0.33.1  →   ^2.10.2
 react-dom                 ^16.13.1  →   ^18.3.1
 react-ga                    ^2.7.0  →    ^3.3.1
 react-is                   ^18.2.0  →   ^18.3.1
 react-svg                  ^7.2.14  →  ^16.1.34
 style-loader                ^1.2.1  →    ^4.0.0
 styled-components           ^5.1.0  →    ^6.1.9
 urijs                      ^1.19.2  →  ^1.19.11
 webpack                    ^4.43.0  →   ^5.91.0
 webpack-bundle-analyzer     ^3.7.0  →   ^4.10.2
 webpack-cli                ^3.3.11  →    ^5.1.4
 whatwg-fetch                ^3.0.0  →   ^3.6.20

lingyun1010 commented 6 months ago

We have some warnings and errors if update the above dependencies from @ebi-gene-expression-group/anatomogram and @ebi-gene-expression-group/expression-atlas-heatmap-highcharts.

npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react@16.14.0
npm warn node_modules/react
npm warn   react@"^18.3.1" from the root project
npm warn   40 more (@ebi-gene-expression-group/anatomogram, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.14.0" from react-dom@16.14.0
npm warn node_modules/react-dom
npm warn   react-dom@"^18.3.1" from the root project
npm warn   22 more (@ebi-gene-expression-group/anatomogram, ...)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react@16.14.0
npm warn node_modules/react
npm warn   react@"^18.3.1" from the root project
npm warn   40 more (@ebi-gene-expression-group/anatomogram, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.14.0" from react-dom@16.14.0
npm warn node_modules/react-dom
npm warn   react-dom@"^18.3.1" from the root project
npm warn   22 more (@ebi-gene-expression-group/anatomogram, ...)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react@16.14.0
npm warn node_modules/react
npm warn   react@"^18.3.1" from the root project
npm warn   40 more (@ebi-gene-expression-group/anatomogram, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"~0.14 || ^15.0.0 || ^16.0.0" from react-highcharts@16.1.0
npm warn node_modules/react-highcharts
npm warn   react-highcharts@"^16.1.0" from the root project
npm warn   2 more (...)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: undefined@undefined
npm warn Found: react@16.14.0
npm warn node_modules/react
npm warn   react@"^18.3.1" from the root project
npm warn   40 more (@ebi-gene-expression-group/anatomogram, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^0.14.0 || ^15.0.0-0 || ^16.0.0-0" from react-refetch@3.0.1
npm warn node_modules/react-refetch
npm warn   react-refetch@"^3.0.1" from the root project
npm warn   1 more (@ebi-gene-expression-group/expression-atlas-heatmap-highcharts)
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: undefined@undefined
npm error Found: react@18.3.1
npm error node_modules/react
npm error   react@"^18.3.1" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"~0.14 || ^15.0.0 || ^16.0.0" from react-highcharts@16.1.0
npm error node_modules/react-highcharts
npm error   react-highcharts@"^16.1.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

lingyun1010 commented 6 months ago

According to the errors above, we need to fix the overriding dependency issues from @ebi-gene-expression-group/anatomogram and @ebi-gene-expression-group/expression-atlas-heatmap-highcharts. I first tried to resolve the issues from @ebi-gene-expression-group/anatomogram.

Here is the upgrade report :

 @babel/cli                 ^7.7.5  →   ^7.24.5
 @babel/core                ^7.7.5  →   ^7.24.5
 @babel/preset-env          ^7.7.6  →   ^7.24.5
 @babel/preset-react        ^7.7.4  →   ^7.24.1
 babel-loader               ^8.0.6  →    ^9.1.3
 clean-webpack-plugin       ^3.0.0  →    ^4.0.0
 coveralls                  ^3.0.9  →    ^3.1.1
 enzyme                    ^3.10.0  →   ^3.11.0
 enzyme-adapter-react-16   ^1.15.1  →   ^1.15.8
 eslint                     ^6.7.2  →    ^9.2.0
 fast-xml-parser           ^3.14.0  →    ^4.3.6
 file-loader                ^4.2.0  →    ^6.2.0
 image-webpack-loader       ^6.0.0  →    ^8.1.0
 jest                      ^24.9.0  →   ^29.7.0
 lodash                   ^4.17.15  →  ^4.17.21
 prop-types                ^15.7.2  →   ^15.8.1
 react                    ^16.12.0  →   ^18.3.1
 react-dom                ^16.12.0  →   ^18.3.1
 react-svg                 ^7.2.14  →  ^16.1.34
 react-test-renderer      ^16.12.0  →   ^18.3.1
 styled-components          ^4.4.1  →    ^6.1.9
 urijs                     ^1.19.2  →  ^1.19.11
 webpack                   ^4.41.2  →   ^5.91.0
 webpack-cli               ^3.3.10  →    ^5.1.4
 webpack-dev-server         ^3.9.0  →    ^5.0.4

CODE CHANGED Due to upgrading to webpack V4, we need to update devServer in webpack.config.js.

  devServer: {
    static: path.join(__dirname, 'html'),
    devMiddleware: {
      publicPath: commonPublicPath
    },
    port: 9000,
    hot: "only"
  }

ERROR While I was trying to install the latest packages, I got some conflicts in dependencies and one remaining to be resolved for now.

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from recompose@0.30.0
npm ERR! node_modules/recompose
npm ERR!   recompose@"*" from the root project

RESULT recompose is a six-years old package with no recent updates, which is not compilable with the upgraded react version.

CONCLUSION We need more time to fix upstream dependency conflicts. Due to this is not a priority for release, I suggest take another look while possible.

ebi-gene-expression-group / atlas-web-bulk

Chore - Update bulk with the latest webpack and its dependencies #176