Fix build setup for webpack 5

This required some manual changes, since these scripts have been adapted
from an old ejected create-react-app config in this project.

Requires a commonmark.js downgrade:
commonmark/commonmark.js#195

config/webpack.config.prod.js

@@ -43,16 +43,12 @@ module.exports = {
     output: {
         // The build folder.
         path: paths.appBuild,
-        // Generated JS file names (with nested folders).
-        // There will be one main bundle, and one file per asynchronous chunk.
-        // We don't currently advertise code splitting but Webpack supports it.
-        filename: '[name].js',
         chunkFilename: '[name].chunk.js',
         // We inferred the "public path" (such as / or /my-project) from homepage.
         publicPath: publicPath,
         // Point sourcemap entries to original disk location (format as URL on Windows)
         devtoolModuleFilenameTemplate: info =>
-            path
+        path
             .relative(paths.appSrc, info.absoluteResourcePath)
             .replace(/\\/g, '/'),
     },
@@ -82,57 +78,19 @@ module.exports = {
         ],
     },
     module: {
-        strictExportPresence: true,
         rules: [
-            // TODO: Disable require.ensure as it's not a standard language feature.
-            // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
-            // { parser: { requireEnsure: false } },
-
             {
-                // "oneOf" will traverse all following loaders until one will
-                // match the requirements. When no loader matches it will fall
-                // back to the "file" loader at the end of the loader list.
-                oneOf: [
-                    // "url" loader works just like "file" loader but it also embeds
-                    // assets smaller than specified size as data URLs to avoid requests.
-                    {
-                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-                        loader: require.resolve('url-loader'),
-                        options: {
-                            limit: 10000,
-                            name: '[name].[ext]',
-                        },
-                    },
-                    // Process JS with Babel.
-                    {
-                        test: /\.(js|jsx)$/,
-                        include: paths.appSrc,
-                        loader: require.resolve('babel-loader'),
-                        options: {
-
-                            compact: true,
-                        },
-                    },
-                    // "file" loader makes sure assets end up in the `build` folder.
-                    // When you `import` an asset, you get its filename.
-                    // This loader don't uses a "test" so it will catch all modules
-                    // that fall through the other loaders.
-                    {
-                        loader: require.resolve('file-loader'),
-                        // Exclude `js` files to keep "css" loader working as it injects
-                        // it's runtime that would otherwise processed through "file" loader.
-                        // Also exclude `html` and `json` extensions so they get processed
-                        // by webpacks internal loaders.
-                        exclude: [/\.js$/, /\.html$/, /\.json$/],
-                        options: {
-                            name: '[name].[ext]',
-                        },
-                    },
-                    // ** STOP ** Are you adding a new loader?
-                    // Make sure to add the new loader(s) before the "file" loader.
-                ],
-            },
-        ],
+                test: /\.(js|jsx)$/,
+                include: paths.appSrc,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env', '@babel/preset-react']
+                    }
+                }
+            }
+        ]
     },
     plugins: [
         // Makes some environment variables available to the JS code, for example:

package.json

@@ -10,7 +10,7 @@
   },
   "homepage": "https://github.com/ccnmtl/econplayground.js#readme",
   "dependencies": {
-    "commonmark": "~0.29.0",
+    "commonmark": "0.29.1",
     "jsxgraph": "~1.1.0",
     "object-assign": "~4.1.1",
     "promise": "~8.1.0",
@@ -36,6 +36,7 @@
     "babel-eslint": "~10.1.0",
     "babel-jest": "~26.5.0",
     "babel-loader": "~8.1.0",
+    "bfj": "^7.0.2",
     "canvas": "~2.6.0",
     "eslint": "~6.8.0",
     "eslint-config-react-app": "~5.2.0",
@@ -47,6 +48,7 @@
     "fs-extra": "~9.0.0",
     "jest": "~26.5.2",
     "jsdom": "~16.4.0",
+    "lodash": "^4.17.20",
     "react-dev-utils": "~10.2.0",
     "react-test-renderer": "~16.13.0",
     "style-loader": "~2.0.0",

scripts/build.js

@@ -14,6 +14,8 @@ process.on('unhandledRejection', err => {
 // Ensure environment variables are read.
 require('../config/env');
 
+const _ = require('lodash');
+
 const path = require('path');
 const chalk = require('chalk');
 const fs = require('fs-extra');
@@ -107,10 +109,32 @@ function build(previousFileSizes) {
   let compiler = webpack(config);
   return new Promise((resolve, reject) => {
     compiler.run((err, stats) => {
+      let messages;
       if (err) {
-        return reject(err);
+        if (!err.message) {
+          return reject(err);
+        }
+        messages = formatWebpackMessages({
+          errors: [err.message],
+          warnings: [],
+        });
+      } else {
+          const statsJson = stats.toJson({
+              all: false,
+              warnings: true,
+              errors: true,
+              errorDetails: false
+          })
+          messages = formatWebpackMessages({
+              errors: _.map(statsJson.errors, function(o) {
+                  const moduleName = o.moduleName ? o.moduleName + ': ' : '';
+                  return moduleName + o.message;
+              }),
+              warnings: _.map(statsJson.warnings, function(o) {
+                  return o.message;
+              })
+          });
       }
-      const messages = formatWebpackMessages(stats.toJson({}, true));
       if (messages.errors.length) {
         // Only keep the first error. Others are often indicative
         // of the same problem, but confuse the reader with noise.