@commercetools-frontend/mc-scripts 21.0.0-rc.0 → 21.0.0-rc.4

package/build/commands/build.js

@@ -102,17 +102,11 @@ function build(previousFileSizes) {
           warnings: []
         });
       } else {
-        //TODO: Remove after 'react-dev-utils' natively supports webpack@5
-        const rawMessages = stats.toJson({
+        messages = formatWebpackMessages(stats.toJson({
           all: false,
           warnings: true,
-          errors: true,
-          moduleTrace: false
-        });
-        messages = formatWebpackMessages({
-          errors: rawMessages.errors.map(e => e.message),
-          warnings: rawMessages.warnings.map(e => e.message)
-        });
+          errors: true
+        }));
       }
 
       if (messages.errors.length) {

package/build/commands/start.js

@@ -77,14 +77,9 @@ choosePort(HOST, DEFAULT_PORT).then(port => {
     port,
     publicPath: config.output.publicPath
   });
-  const devServer = new WebpackDevServer(compiler, serverConfig); // Launch WebpackDevServer.
-
-  devServer.listen(port, HOST, err => {
-    if (err) {
-      console.log(err);
-      return;
-    }
+  const devServer = new WebpackDevServer(serverConfig, compiler); // Launch WebpackDevServer.
 
+  devServer.startCallback(() => {
     if (isInteractive) {
       clearConsole();
     }

package/build/config/create-webpack-config-for-development.js

@@ -96,7 +96,15 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
       // https://github.com/facebook/create-react-app/issues/290
       // `web` extension prefixes have been added for better support
       // for React Native Web.
-      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`)
+      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`),
+      // NOTE: this is meant to be a temporary list of fallback/polyfills for certain
+      // nodejs modules. With Webpack <5 these polyfills were included by default in Webpack,
+      // however now it's not the case anymore.
+      // See also related work in CRA: https://github.com/facebook/create-react-app/pull/11764
+      fallback: {
+        url: require.resolve('url/'),
+        querystring: require.resolve('querystring-es3')
+      }
     },
     entry: {
       app: [require.resolve('./application-runtime'), !mergedOptions.toggleFlags.disableCoreJs && require.resolve('core-js/stable'), // When using the experimental `react-refresh` integration,

package/build/config/create-webpack-config-for-production.js

@@ -138,7 +138,14 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
       // https://github.com/facebook/create-react-app/issues/290
       // `web` extension prefixes have been added for better support
       // for React Native Web.
-      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`)
+      extensions: ['js', 'mjs', 'cjs', 'ts', 'tsx', 'json', 'jsx'].map(ext => `.${ext}`),
+      // NOTE: this is meant to be a temporary list of fallback/polyfills for certain
+      // nodejs modules. With Webpack <5 these polyfills were included by default in Webpack,
+      // however now it's not the case anymore.
+      // See also related work in CRA: https://github.com/facebook/create-react-app/pull/11764
+      fallback: {
+        querystring: require.resolve('querystring-es3')
+      }
     },
     // In production, we only want to load the polyfills and the app code.
     entry: {

package/build/config/webpack-dev-server.config.js

@@ -61,16 +61,18 @@ module.exports = ({
 
   // Enable HTTPS if the HTTPS environment variable is set to 'true'
   // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
-  onBeforeSetupMiddleware({
-    app
-  }) {
+  setupMiddlewares(middlewares, devServer) {
     var _applicationConfig$en, _applicationConfig$en2;
 
-    app.set('views', devAuthentication.views);
-    app.set('view engine', devAuthentication.config.viewEngine); // This lets us open files from the runtime error overlay.
+    if (!devServer) {
+      throw new Error('webpack-dev-server is not defined');
+    } // This lets us open files from the runtime error overlay.
 
-    app.use(errorOverlayMiddleware());
-    app.use('/api/graphql', (request, response) => {
+
+    middlewares.unshift(errorOverlayMiddleware());
+    devServer.app.set('views', devAuthentication.views);
+    devServer.app.set('view engine', devAuthentication.config.viewEngine);
+    devServer.app.post('/api/graphql', (request, response) => {
       response.statusCode = 400;
       response.setHeader('Content-Type', 'application/json');
       const errorMessage = `This GraphQL endpoint is not available in ${process.env.NODE_ENV} mode, as it's not necessary. The menu configuration is loaded from the file "menu.json" (more info at https://www.npmjs.com/package/@commercetools-frontend/application-shell). In case you do need to test things out, you can pass a "mcProxyApiUrl" to your application config (in the "additionalEnv" properties) and point it to the production environment, for example for GCP-EU use "https://mc.europe-west1.gcp.commercetools.com/api/graphql".`;
@@ -86,13 +88,15 @@ module.exports = ({
 
       // Handle login page for OIDC workflow when developing against a local MC API.
       if ((_applicationConfig$en3 = applicationConfig.env.__DEVELOPMENT__) !== null && _applicationConfig$en3 !== void 0 && (_applicationConfig$en4 = _applicationConfig$en3.oidc) !== null && _applicationConfig$en4 !== void 0 && _applicationConfig$en4.authorizeUrl.startsWith('http://localhost')) {
-        app.use('/login/authorize', devAuthentication.middlewares.createLoginMiddleware(applicationConfig.env));
+        devServer.app.get('/login/authorize', devAuthentication.middlewares.createLoginMiddleware(applicationConfig.env));
       }
     } else {
-      app.use('/login', devAuthentication.middlewares.createLoginMiddleware(applicationConfig.env)); // Intercept the /logout page and "remove" the auth cookie value
+      devServer.app.get('/login', devAuthentication.middlewares.createLoginMiddleware(applicationConfig.env)); // Intercept the /logout page and "remove" the auth cookie value
 
-      app.use('/logout', devAuthentication.middlewares.createLogoutMiddleware(applicationConfig.env));
+      devServer.app.get('/logout', devAuthentication.middlewares.createLogoutMiddleware(applicationConfig.env));
     }
+
+    return middlewares;
   }
 
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-scripts",
-  "version": "21.0.0-rc.0",
+  "version": "21.0.0-rc.4",
   "description": "Configuration and scripts for developing a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -26,19 +26,19 @@
     "build:bundles:watch": "yarn build -w"
   },
   "dependencies": {
-    "@babel/runtime": "7.16.7",
-    "@babel/runtime-corejs3": "7.16.8",
-    "@commercetools-frontend/application-config": "21.0.0-rc.0",
-    "@commercetools-frontend/assets": "20.12.3",
-    "@commercetools-frontend/babel-preset-mc-app": "21.0.0-rc.0",
-    "@commercetools-frontend/mc-dev-authentication": "21.0.0-rc.0",
-    "@commercetools-frontend/mc-html-template": "21.0.0-rc.0",
+    "@babel/runtime": "^7.16.7",
+    "@babel/runtime-corejs3": "^7.16.8",
+    "@commercetools-frontend/application-config": "21.0.0-rc.4",
+    "@commercetools-frontend/assets": "21.0.0-rc.1",
+    "@commercetools-frontend/babel-preset-mc-app": "21.0.0-rc.1",
+    "@commercetools-frontend/mc-dev-authentication": "21.0.0-rc.1",
+    "@commercetools-frontend/mc-html-template": "21.0.0-rc.4",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
     "@svgr/webpack": "6.2.0",
     "autoprefixer": "10.4.2",
     "babel-loader": "8.2.3",
     "browserslist": "4.19.1",
-    "core-js": "3.20.3",
+    "core-js": "^3.20.3",
     "css-loader": "5.2.7",
     "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "10.0.0",
@@ -57,7 +57,8 @@
     "postcss-import": "14.0.2",
     "postcss-loader": "6.2.1",
     "postcss-reporter": "7.0.5",
-    "react-dev-utils": "11.0.4",
+    "querystring-es3": "^0.2.1",
+    "react-dev-utils": "12.0.0",
     "react-refresh": "0.11.0",
     "serve-handler": "6.1.3",
     "shelljs": "0.8.5",
@@ -65,14 +66,15 @@
     "svg-url-loader": "7.1.1",
     "terser-webpack-plugin": "5.3.0",
     "thread-loader": "3.0.4",
+    "url": "^0.11.0",
     "webpack": "5.66.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-dev-server": "4.7.3",
     "webpackbar": "5.0.2"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "7.16.10",
-    "@babel/preset-env": "7.16.11",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.16.11",
     "rimraf": "3.0.2"
   },
   "engines": {