Feature/report bundler updates

[dgrebb]

This updates dependencies, refactors webpack, and makes adjustments as needed to get build-compare back in action.

Here's a working, downstream build (not this branch).

Important

This PR should only be merged after garris/backstop-twentytwenty#6, which fixes webpack issues similar to this PR.

A broken import has been left in place of backstop-twentytwenty on line 69 of package.json.

Note

The recent blasphemous addition of "type": "commonjs" to package.json had webpack in a tizzy; throwing errors when using — GASP — esm in commonjs. More on that below.

This is a good first step towards adding new features to the report UI.

• eslint-plugin-n stuck at 15.x.x until eslint-config-semistandard updates their peers

• chalk stuck at latest major 4.1.0

• "type": "commonjs" must be removed from package.json to avoid a webpack error:

      ❯ npm run build-compare
    
    > [email protected] build-compare
    > cp ./node_modules/diverged/src/diverged.js ./compare/output/ && cp ./node_modules/diff/dist/diff.js ./compare/output/ && webpack --config ./compare/webpack.config.js && npm run -s lint
    
    assets by status 389 bytes [cached] 1 asset
    ./compare/src/index.js 328 bytes [built] [code generated] [1 error]
    
    ERROR in ./compare/src/index.js 1:0
    Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
    File was processed with these loaders:
     * ./node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    > import React from 'react';
    | import ReactDOM from 'react-dom';
    | import { Provider } from 'react-redux';
    
    webpack 5.89.0 compiled with 1 error in 283 ms

We can be filthy, typeless, mixed-module scoundrels for now. I've removed "type": "commonjs" from package.json in this PR.

Tested

• npm run build-compare
• npm run build-and-copy-report-bundle
• npm run sanity-test
• npm run sanity-test-playwright
• npm run sanity-test-docker
• npm run sanity-test-docker-playwright

Caveats

• webpack warns about performance and asset sizes
• webpack warns about toggleTextInfo , which is summarized in a question, below

Questions

What is toggleTextInfo?

File: compare/src/components/molecules/SettingsPopup.js
4: import { updateSettings, toggleAllImages, toggleTextInfo } from '../../actions';

compare/src/actions/index.js does not define toggleTextInfo, and it's definitely called in compare/src/components/molecules/SettingsPopup.js:

File: compare/src/components/molecules/SettingsPopup.js
121:     toogleTextInfo: value => {
122:       dispatch(toggleTextInfo(value));
123:     }

[dgrebb]

@garris this is a working branch of build-compare etc. back in action. We can discuss in the near future!