[dependencies] Update to React 16, Webpack 4, Babel 7 #88

hydrosquall · 2019-05-11T21:38:37Z

This PR sits on top of changes from #85, but I can drop those commits if that PR doesn't end up getting merged first. It addresses #87 by bringing this project up to the latest react so that people can use current UI libraries to add to the project.

Primary Changes

Webpack 1 -> 4
React/React-Dom 14 -> 16
Pull out the .babelrc config file so that parcel and the webpack file can share the configuration.
Transformed components to use class syntax because React.createClass is no longer used in react 16, using this jscodeshift

The preview deploy branch for this set of changes is available here, I believe everything builds correctly.

https://5cd74c6f696d0e00070244d8--blockbuilder-search-hydrosquall.netlify.com/

I also confirmed locally that the package maintains functionality when used with the core blockbuilder app using npm link.

hydrosquall · 2019-05-11T22:38:16Z

Note that bundle.js isn't actually deleted, just dramatically changed, I've heard that Github UI has trouble with displaying large diffs.

micahstubbs · 2019-05-15T07:48:25Z

@hydrosquall thanks for for upgrading the dependencies! I've been meaning to do this for a while.

curious, could you factor out the changes from #86, so that this only includes the dependency upgrades?

hydrosquall · 2019-05-16T00:51:11Z

Yes, of course! I should have done that up front, I only mixed them up bc I didn’t anticipate there being any hurdles with the parcel/netlify proxy (but was too optimistic).

…

On Wed, May 15, 2019 at 3:48 AM Micah Stubbs ***@***.***> wrote: @hydrosquall <https://github.com/hydrosquall> thanks for for upgrading the dependencies! I've been meaning to do this for a while. curious, could you factor out the changes from #86 <#86>, so that this only includes the dependency upgrades? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#88?email_source=notifications&email_token=ACE2MM3K6GHBOGPYVVMI4O3PVO54VA5CNFSM4HMJBDQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVNZ7EI#issuecomment-492543889>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACE2MMY5J3NEFME2DMLJM3DPVO54VANCNFSM4HMJBDQA> .

hydrosquall · 2019-05-16T02:07:00Z

@micahstubbs I pulled out the changes from #86 since that would otherwise have modified package.json, and regenerated the lockfile / bundle.js.

micahstubbs · 2019-05-18T20:45:27Z

nice! will have a look

micahstubbs · 2019-05-18T20:50:17Z

doing some troubleshooting

(py27) ➜  blockbuilder-search git:(hydrosquall-feature/update-to-react-16) ✗ yarn buildWatch
yarn run v1.13.0
$ webpack --color --progress --watch
Hash: d437a155a1da4cdfeeeb
Version: webpack 1.15.0
Time: 36ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.56 kB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built] [1 error]

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ./src/main.js in /Users/m/workspace/blockbuilder-search
 @ multi main

probably need to run yarn again to install the new packages

micahstubbs · 2019-05-18T20:56:50Z

ok, looks like something is up with the bundle now 🤔

search:12 GET http://localhost:8889/public-search/bundle.js net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)

micahstubbs · 2019-05-18T20:58:35Z

reading more about this error https://stackoverflow.com/questions/29894154/chrome-neterr-incomplete-chunked-encoding-error

micahstubbs · 2019-05-18T21:00:14Z

interesting, so Firefox gives us a more useful error message:

TypeError: action.data is undefined[Learn More] bundle.js:22875:10
Source map error: SyntaxError: JSON.parse: unterminated string at line 1 column 1428791 of the JSON data
Resource URL: http://localhost:8889/public-search/bundle.js
Source Map URL: data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAgNzAzMmNiNWMwNDNhMGI3ZDU5NGMiLCJ3ZWJwYWNrOi8vLy4vcmVhY3QvbWFpbi5qcyIsIndlYnBhY2s6Ly8vLi9yZWFjdC9zdHlsZS9tYWluLnNjc3M/YzY4OSIsIndlYnBhY2s6Ly8vLi9yZWFjdC9zdHlsZS9tYWluLnNjc3MiLCJ3ZWJwYWNrOi8vLy4vfi9jc3MtbG9hZGVyL2xpYi9jc3MtYmFzZS5qcyIsIndlYnBhY2s6Ly8vLi9+L3N0eWxlLWxvYWRlci9hZGRTdHlsZXMuanMiLCJ3ZWJwYWNrOi8vLy4vfi9yZWFjdC9yZWFjdC5qcyIsIndlYnBhY2s6Ly8vLi9+L3JlYWN0L2xpYi9SZWFjdC5qcyIsIndlYnBhY2s6Ly8vLi9+L3JlYWN0L2xpYi9SZWFjdERPTS5qcyIsIndlYnBhY2s6Ly8vLi9+L3Byb2Nlc3MvYnJvd3Nlci5qcyIsIndlYnBhY2s6Ly8vLi9+L3JlYWN0L2xpYi9SZWFjdEN1cnJlbnRPd25lci5qcyIsIndlYnBhY2s6Ly8vLi9+L3JlYWN0L2xpYi9SZWFjdERPTVRleHRDb21wb25lbnQuanMiLCJ3ZWJwYWNrOi8vLy4vfi9yZWFjdC9saWIvRE9NQ2hpbGRyZW5PcGVyYXRpb25zLmpzIiwid2VicGFjazovLy8uL34v…[Learn More]

micahstubbs · 2019-05-19T05:40:37Z

made two small commits to preserve the webpack progress bar feature (looks like it got moved to a plugin sometime between weppack 1 and webpack 4)

https://www.npmjs.com/package/progress-bar-webpack-plugin

hydrosquall · 2019-05-19T16:23:21Z

Thanks for bringing back the color and progress bar functionality :)!

Unfortunately I haven't been able to reproduce the chunked encoding error, but I've gotten it in other projects before if I ran yarn install while some form of webpack watch mode was on. Usually restarting watch mode after the yarn install would fix it.

Are you still seeing the incomplete chunked encoding message?

hydrosquall · 2019-05-19T16:37:55Z

I tried out this modified branch together with the docker-compose setup over in enjalot/blockbuilder#232 and it seems to work :)!

micahstubbs · 2019-05-21T03:34:38Z

huh, will take another look.

I'd like to ensure that the local blockbuilder + local blockbuilder-search UI dev setup still works, as a baseline.

micahstubbs · 2019-05-21T03:37:14Z

Ok, so I am trying this:

stopping the yarn buildWatch process
rm -rf node_modules
yarn to install packages
restart yarn buildWatch

micahstubbs · 2019-05-21T03:40:24Z

strange, still see net::ERR_INCOMPLETE_CHUNKED_ENCODING

micahstubbs · 2019-05-21T03:41:05Z

@hydrosquall what does your environment look like? here's mine:

node -v
v11.10.0

yarn -v
1.16.0

hydrosquall · 2019-05-21T23:33:20Z

I’ve tried this on both my work and home laptops, on the work laptop I’m using the same node and yarn versions as you but on my home laptop I’m using node 12. ```bash node -v v12.1.0 yarn -v 1.16.0 ``` Do you run into the chunk issues with `yarn build` too, or just with buildWatch? I just tried this again locally using the docker-compose setup linking this local copy to the `blockbuilder` with buildWatch and buildWatch in chrome, and wasn't able to get the chunked encoding issue.

…

On Mon, May 20, 2019 at 11:41 PM Micah Stubbs ***@***.***> wrote: @hydrosquall <https://github.com/hydrosquall> what does your environment look like? here's mine: node -v v11.10.0 yarn -v 1.16.0 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#88?email_source=notifications&email_token=ACE2MM43TB6JZ6P46MLPKTTPWNVNJA5CNFSM4HMJBDQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV2VCDY#issuecomment-494227727>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACE2MM4NDS3NHYCUYN43PE3PWNVNJANCNFSM4HMJBDQA> .

hydrosquall · 2019-05-22T02:48:17Z

If we end up hitting a standstill in reproducing the chunking issue, what I could try instead is to do a version of #90 without the library upgrades. This would let us test the search page by itself without needing to spin up blockbuilder and go through the whole npm link dance. Then we could test all PRs in a clean environment through tools like codesandbox or stackblitz.

What do you think?

(To simplify things, I've put together the PR I described above here: #91 ). If we merge that first, it might help with testing on this branch.

micahstubbs · 2019-05-22T06:03:53Z

@hydrosquall I fixed the chunk encoding problem 🎉

the solution was:

use node v12.3.0
use yarn to install packages for blockbuilder the editor (npm chokes on building node-sass from source with node-gyp, yarn just works)
some handlebars config changes in PR update handlebars config in server.js. fix #234 blockbuilder#235

thanks for your patience with this one. It's important to me to make sure that we keep the current blockbuilder + blockbuilder search setup working, since this is how we run the site in production right now.

of course, I'm open to improving how we run the site in production also, but later. one change at a time 😄

micahstubbs · 2019-05-22T06:05:06Z

so, once I get a review and enjalot/blockbuilder#235 goes in, we should be able to merge this one too.

hydrosquall · 2019-05-22T12:54:03Z

Woohoo!! Thanks for diving into this so deeply, I’m so happy to see that this is working. Maintaining compatibility with the existing production setup makes a lot of sense to me. We may find a project like nodenv relevant in the future to ensure people run the expected version of node together with the application (https://github.com/nodenv/nodenv )

…

On Wed, May 22, 2019 at 2:03 AM Micah Stubbs ***@***.***> wrote: @hydrosquall <https://github.com/hydrosquall> I fixed the chunk encoding problem 🎉 the solution was: - use node v12.3.0 - use yarn to install packages for blockbuilder the editor - some handlebars config changes in PR enjalot/blockbuilder#235 <enjalot/blockbuilder#235> thanks for your patience with this one. It's important to me to make sure that we keep the current blockbuilder + blockbuilder search working, since this is how we run the site in production currently. of course, I'm open to improving how we run the site in production also, but later. one change at a time 😄 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#88?email_source=notifications&email_token=ACE2MM2HMCZ5QYMGAFWB3ZTPWTO4VA5CNFSM4HMJBDQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV57WQI#issuecomment-494664513>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACE2MMZY5RAOEN2KB35PWRTPWTO4VANCNFSM4HMJBDQA> .

enjalot · 2019-05-23T04:03:54Z

thanks for doing this and digging in. I'll let @micahstubbs hit the merge button when ready

micahstubbs · 2019-05-23T05:19:50Z

merged! thanks for the contribution @hydrosquall and the review @enjalot 📈

hydrosquall changed the title ~~Feature/update to react 16~~ [dependencies] Update to React 16 May 11, 2019

hydrosquall changed the title ~~[dependencies] Update to React 16~~ [dependencies] Update to React 16, Webpack 4, Babel 7 May 11, 2019

micahstubbs self-requested a review May 15, 2019 07:48

micahstubbs mentioned this pull request May 15, 2019

[Feature] Update Redux, Add Devtools #89

Merged

hydrosquall and others added 5 commits May 15, 2019 21:56

[dependencies] Update to React 16, Webpack 4, Babel 7

74c7fab

[chore] Jscodemod Components to use modern React Class Syntax

9a54905

[dependencies] Pin to minimum react version

f4c2a96

[dependencies] Use modern style-loader and PropTypes

64498d4

[dependencies] Update lockfile

95148b8

hydrosquall force-pushed the feature/update-to-react-16 branch from db7fc90 to 95148b8 Compare May 16, 2019 02:03

[build] Regenerate public/bundle.js

6f864e6

hydrosquall mentioned this pull request May 16, 2019

[Development] Add parcel-bundler for Local Development #90

Open

micahstubbs added 2 commits May 18, 2019 22:38

update progress and colors options for webpack 4

3c840a7

yarn add -D progress-bar-webpack-plugin

e1659d1

hydrosquall mentioned this pull request May 22, 2019

Add parcel bundler for testing blockbuilder-search locally #91

Closed

micahstubbs mentioned this pull request May 22, 2019

update handlebars config in server.js. fix #234 enjalot/blockbuilder#235

Merged

micahstubbs merged commit ebfd44b into enjalot:master May 23, 2019

hydrosquall mentioned this pull request May 24, 2019

[Dependencies] React 16 Update #87

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[dependencies] Update to React 16, Webpack 4, Babel 7 #88

[dependencies] Update to React 16, Webpack 4, Babel 7 #88

hydrosquall commented May 11, 2019 •

edited

Loading

hydrosquall commented May 11, 2019

micahstubbs commented May 15, 2019

hydrosquall commented May 16, 2019 via email

hydrosquall commented May 16, 2019

micahstubbs commented May 18, 2019

micahstubbs commented May 18, 2019 •

edited

Loading

micahstubbs commented May 18, 2019

micahstubbs commented May 18, 2019

micahstubbs commented May 18, 2019

micahstubbs commented May 19, 2019 •

edited

Loading

hydrosquall commented May 19, 2019

hydrosquall commented May 19, 2019

micahstubbs commented May 21, 2019

micahstubbs commented May 21, 2019 •

edited

Loading

micahstubbs commented May 21, 2019 •

edited

Loading

micahstubbs commented May 21, 2019

hydrosquall commented May 21, 2019 via email •

edited

Loading

hydrosquall commented May 22, 2019 •

edited

Loading

micahstubbs commented May 22, 2019 •

edited

Loading

micahstubbs commented May 22, 2019

hydrosquall commented May 22, 2019 via email •

edited

Loading

enjalot commented May 23, 2019

micahstubbs commented May 23, 2019

[dependencies] Update to React 16, Webpack 4, Babel 7 #88

[dependencies] Update to React 16, Webpack 4, Babel 7 #88

Conversation

hydrosquall commented May 11, 2019 • edited Loading

hydrosquall commented May 11, 2019

micahstubbs commented May 15, 2019

hydrosquall commented May 16, 2019 via email

hydrosquall commented May 16, 2019

micahstubbs commented May 18, 2019

micahstubbs commented May 18, 2019 • edited Loading

micahstubbs commented May 18, 2019

micahstubbs commented May 18, 2019

micahstubbs commented May 18, 2019

micahstubbs commented May 19, 2019 • edited Loading

hydrosquall commented May 19, 2019

hydrosquall commented May 19, 2019

micahstubbs commented May 21, 2019

micahstubbs commented May 21, 2019 • edited Loading

micahstubbs commented May 21, 2019 • edited Loading

micahstubbs commented May 21, 2019

hydrosquall commented May 21, 2019 via email • edited Loading

hydrosquall commented May 22, 2019 • edited Loading

micahstubbs commented May 22, 2019 • edited Loading

micahstubbs commented May 22, 2019

hydrosquall commented May 22, 2019 via email • edited Loading

enjalot commented May 23, 2019

micahstubbs commented May 23, 2019

hydrosquall commented May 11, 2019 •

edited

Loading

micahstubbs commented May 18, 2019 •

edited

Loading

micahstubbs commented May 19, 2019 •

edited

Loading

micahstubbs commented May 21, 2019 •

edited

Loading

micahstubbs commented May 21, 2019 •

edited

Loading

hydrosquall commented May 21, 2019 via email •

edited

Loading

hydrosquall commented May 22, 2019 •

edited

Loading

micahstubbs commented May 22, 2019 •

edited

Loading

hydrosquall commented May 22, 2019 via email •

edited

Loading