search

AgileVentures / fv-web-ui

A CRUD dictionary web-app using React.JS, Material Design and Nuxeo as a back-end.
Apache License 2.0
0 stars 0 forks source link

upgrading React #1

Open tansaku opened 6 years ago

tansaku commented 6 years ago

Following instructions at https://docs.mobify.com/progressive-web/latest/upgrades/react-16/#upgrade-react-16-2

The instructions regarding installing jcodeshift were a little unclear in terms of what was meant by a /web directory, which the project does not have. In the first instance added a web/ dir and installed codshift there.

The instructions for npm install and removals were replaced with the corresponding yarn operations:

$ yarn add react@15.6.0 && yarn add react-dom@15.6.0
$ yarn remove react-addons-shallow-compare

although the latter did not complete successfully indicating that that package was not installed to start with.

Moving on to adapting the components, jscodeshift was not available globally, so forced it in with:

$ npm install --global jscodeshift

Then got this error:

$ jscodeshift -t react-codemod/transforms/pure-render-mixin.js app/assets/javascripts/views/components/**/*
ERROR Transform file /Users/tansaku/Documents/GitHub/First-Peoples-Cultural-Council/fv-web-ui/react-codemod/transforms/pure-render-mixin.js does not exist

so moved the react-codemod folder to the root which allowed this to run (after also noting that the components are not in the app but in app/assets/javascript/views) but got the following errors:

https://gist.github.com/tansaku/668de5c61c32a728725d82d81eac1cb4

So did the change manually using VSCode replace ..., which appeared to go smoothly - only a 100 or so matches.

now looking at the proptypes, that's more problematic as there appear to be a very large number of these and it's unclear that the jscodeshift is working, although despite further errors (maybe only warnings) it appears to have worked ..., and the rest of the steps appear to be related to testing or libraries that we're not using ...

Still the app doesn't compile - we get the following errors that may have to be tracked down individually ...:

ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Can't resolve 'react/lib/EventPluginHub' in '/Users/tansaku/Documents/GitHub/First-Peoples-Cultural-Council/fv-web-ui/node_modules/react-tap-event-plugin/src'
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 7:2-37
 @ ./app/assets/javascripts/app.js
 @ multi ./app.js webpack-dev-server/client?http://0.0.0.0:3001 webpack/hot/only-dev-server

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react/lib/EventConstants' in '/Users/tansaku/Documents/GitHub/First-Peoples-Cultural-Council/fv-web-ui/node_modules/react-tap-event-plugin/src'
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./app/assets/javascripts/app.js
 @ multi ./app.js webpack-dev-server/client?http://0.0.0.0:3001 webpack/hot/only-dev-server

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react/lib/EventPluginUtils' in '/Users/tansaku/Documents/GitHub/First-Peoples-Cultural-Council/fv-web-ui/node_modules/react-tap-event-plugin/src'
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./app/assets/javascripts/app.js
 @ multi ./app.js webpack-dev-server/client?http://0.0.0.0:3001 webpack/hot/only-dev-server

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react/lib/EventPropagators' in '/Users/tansaku/Documents/GitHub/First-Peoples-Cultural-Council/fv-web-ui/node_modules/react-tap-event-plugin/src'
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./app/assets/javascripts/app.js
 @ multi ./app.js webpack-dev-server/client?http://0.0.0.0:3001 webpack/hot/only-dev-server

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react/lib/SyntheticUIEvent' in '/Users/tansaku/Documents/GitHub/First-Peoples-Cultural-Council/fv-web-ui/node_modules/react-tap-event-plugin/src'
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./app/assets/javascripts/app.js
 @ multi ./app.js webpack-dev-server/client?http://0.0.0.0:3001 webpack/hot/only-dev-server

ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Can't resolve 'react/lib/ViewportMetrics' in '/Users/tansaku/Documents/GitHub/First-Peoples-Cultural-Council/fv-web-ui/node_modules/react-tap-event-plugin/src'
 @ ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58
 @ ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
 @ ./app/assets/javascripts/app.js
 @ multi ./app.js webpack-dev-server/client?http://0.0.0.0:3001 webpack/hot/only-dev-server
tansaku commented 6 years ago

I can see another project having these same issues: https://github.com/prescottprue/generator-react-firebase/pull/25 looks like we might require upgrades to material-ui and react-tap-event-plugin ...?

tansaku commented 6 years ago

it's looking like the trick will be to get the material-ui and react-tap-event-plugins at just the right version so that they work with react 15.6, which I now appear to have done with the versions 0.19.4 and 2.0.1 respectively, however this leads to a new round of errors e.g.

ERROR in ./app/assets/javascripts/app.js
Module not found: Error: Can't resolve 'material-ui/lib/styles/theme-manager' in '/Users/tansaku/Documents/GitHub/First-Peoples-Cultural-Council/fv-web-ui/app/assets/javascripts'
 @ ./app/assets/javascripts/app.js 44:20-67
 @ multi ./app.js webpack-dev-server/client?http://0.0.0.0:3001 webpack/hot/only-dev-server

ah, although perhaps we can make intermediate process by backing out to material-ui 0.14.4 - aha we can. That allows me to get a version of the site that compiles, although I immediately notice some problems in terms of text being displayed on the site:

but good to see a compiling version on react 15.6 --- follow up would now be a complete review of the site to see what other functionality was affected by the upgrade before pursuing upgrade to higher react or the material upgrade which looks like it will need a fair few adaptations

tansaku commented 6 years ago

although clicks on links not working at all despite compilation, and these errors in the console: