Upgrade react-scripts and webpack when react-scripts uses webpack 4 as a dev dependency

[karikushi]

Webpack 4 has nicer configuration options for compiling SASS to CSS and then exporting to a file. Once react-scripts is updated so that it uses webpack 4 as a dev dependency:

• update react-scripts
• update webpack to version 4
• install webpack-cli and uglifyjs-webpack-plugin and update webpack config files

[nicholeous]

Note: The release with webpack 4 will be react-scripts 2 sauce

[nicholeous]

https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

It has arrived! 🍾

Thanks for finding the link @karikushi

[nicholeous]

Note: Standalone modules that are not a react app will need to be upgraded to a corresponding webpack config. This means moving from webpack 3-4 and from babel 6-7. Goodness me. 😱

babel
webpack

[nicholeous]

I've started on this, but as it's the weekend now I'm just going to leave a log of what's been happening on the branch over at issue-708-upgrade-react-scripts.

Right now I am trying to get tests running in app-account. I believe the cause of the test failures is the webpack build for interbit-covenant-tools

updated react-scripts
- borked everything

installed babel deps from 6-7
- broke jest tests

upgraded to jest 23 to work with babel 7
- some of our plugins for testing require 6

installed babel 6-7 bridge package so they worked again
- polyfill now off by default in transform-runtime, threw error

removed polyfill=false from transform-runtime options
- TESTS PASSED in interbit-covenant-tools! one thing works again!
- Test still broken in interbit-ui-components: missing agreeable eslint peer for react-scripts

updated eslint dependency
- Fixed agreeable eslint peer, now we need webpack 4.19.1... now we're getting somewhere.

installed webpack 4.19.1 in all modules with custom webpack build... wait for it.
- interbit-ui-tools tests run
- webpack builds are hanging from monorepo root. Going into interbit-covenant-tools shows that webpack is prompting to install webpack-cli since upgrading to 4.x

Installed webpack-cli, a new error appears!
- Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

Removed the uglify plugin, beacause it happens by default without config now.
- interbit-covenant-tools built!
- Warning about not using mode to run webpack, defaulting to production

Apply changes to all webpack configs...
- interbit-ui-components had a problem with chunking (changed API, expected...)
- interbit-ui-tools is missing babel-polyfill which is no longer required...

Search for babel-polyfill in interbit-ui-tools and remove it
- build works!

Interbit-ui-components has chunking error from ExtractTextPlugin and this package will not be upgraded to work with webpack 4, so use mini-css-extract-plugin instead. (webpack-contrib/extract-text-webpack-plugin#701 (comment))
- CSS loads! The files are very large, though.
- The interbit-template no longer builds as the css is output to dist/main.css instead of dist/css/main.css

Do not use documented publicPath option on css loader for outputPath - instead add it to the module config filename
- Chunking removed as a result to get build working minimally
- Running build in root only leaves interbit-template with a compile error, probably from exports change ups in babel 7

run build for interbit-template added browser support to package.json

fix interbit-template build error by aligning import/export/module.exports/require usage with babel 7 expected usage

Apply babel 7 exporting rule changes to all app-* repos with remaining build issues
run build for app-* packages and add default react-scripts browser support to package.json

Investigate failing tests in app-account... importing our webpack modules leads to TypeError: Cannot assign to read only property 'exports' of object '#'
- It seems like every stack trace has the import of interbit-covenant-tools in common... could be to do with its webpack config a la webpack/webpack#4039 (comment) as we are using "@babel/plugin-transform-runtime"

Read docs on @babel/plugin-transform-runtime and fix some deps and simplify babelrc files (we are specifying things that are already default in new version) related to it per documentation
- tests still fail, still appear to be failing on importing the interbit-covenant-tools

Per the issue comment, set the sourceType to "unambigious" in babelrc for interbit-covenant-tools
- A new error! Cannot read property crypto of undefined... it appears to be coming from core js lib not being found... ? Appears to be coming through object-hash as we are not calling crypto directly ourselves.

TODO:

• Get tests running across all apps
• Error about not using mode to run webpack, defaulting to production
• eslint supporting packages are using old dependencies, upgrade them all to newer versions while we're here
• Optimize css in interbit-ui-components for production (https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production)
• CSS in interbit-ui-components is not chunked/optimized for speed in dev

[nicholeous]

Error about not using mode to run webpack, defaulting to production
- updated package.jsons to use a --mode flag for all build/dev scripts

Crypto of undefined, where are you coming from?

• The most common problem is not excluding node_modules, but we are doing that. No problem.

• !!! Tried running npm run interbit:start and got window is not defined in interbit-covenant-tools. Crypto is coming from window! window.crypto! Oddly, this is running in node so clearly webpack is confused about its intended environment

• So, since some of our modules are used in covenants which run in both the browser and node (notably, the interbit-covenant-tools package which is causing this error) we should fix targeting and set it to either environment. There is an open issue in webpack 4 to fix the targeting problem here Add target: "universal" webpack/webpack#6525

• There is a bit of a workaround in this issue here Webpack 4.0.1 | WebWorker window is not defined webpack/webpack#6642 (comment)

  • The workaround only fixed the problem in npm run interbit:start context, the tests still fail.

• Now that the node is up, I tried to run npm start (the app in dev mode) after getting the node up, and even with unambiguous module loading, running the include interbit-covenant-tools through a dev-mode node/browsernode app at the same time runs into the same TypeError: Cannot assign to read only property 'exports' of object '#' error. Now, instead of uniform errors in tests and app, we have cannot find crypto in tests and cannot assign to exports in the app.

  • I think we're going to have to suck it up and throw a webpack config into our covenants if we want to use CRA.

  TODO:

  • Get tests running across all apps
  • Error about not using mode to run webpack, defaulting to production
  • eslint supporting packages are using old dependencies, upgrade them all to newer versions while we're here
  • Optimize css in interbit-ui-components for production (https://github.com/webpack-contrib/mini-css-extract-plugin#minimizing-for-production)
  • CSS in interbit-ui-components is not chunked/optimized for speed in dev
  • upgrade eslint/linter pacakges
  • get wallaby working with new babel
  • Check that all scripts work from the root of the repo
  • Eliminate any remaining warnings