[DRAFT] Update nextjs to version 12 and upgrate Vitessce to latest

.babelrc.js

@@ -2,10 +2,13 @@ module.exports = (api) => {
   api.cache(() => process.env.NODE_ENV);
 
   let babelConfig = {
-    presets: [],
+    presets: [
+      "@babel/preset-react"
+    ],
     plugins: [
-      ["lodash"],
-      ["@babel/plugin-transform-runtime"]
+      "lodash",
+      "babel-plugin-add-module-exports",
+      "@babel/plugin-transform-runtime"
     ]
   };
 
@@ -17,6 +20,13 @@ module.exports = (api) => {
         [
           "next/babel",
           {
+            "preset-env": {
+              useBuiltIns: "usage",
+              corejs: 2,
+              targets: {
+                ie: 11
+              },
+            },
             "transform-runtime": {
               corejs: false
             },

.vscode/launch.json

@@ -7,7 +7,7 @@
         {
             "name": "Debug develop in Chrome",
             "request": "launch",
-            "type": "pwa-chrome",
+            "type": "chrome",
             "url": "https://ui-default.scp-staging.biomage.net/",
             "webRoot": "${workspaceFolder}"
         },
@@ -23,7 +23,7 @@
             "request": "launch",
             "cwd": "${workspaceFolder}",
             "runtimeExecutable": "npm",
-            "runtimeArgs": ["test"]
+            "runtimeArgs": ["test"],
         },
     ]
 }

config/jest/cssTransform.js

@@ -5,7 +5,7 @@
 
 module.exports = {
   process() {
-    return 'module.exports = {};';
+    return { code: 'module.exports = {};' }
   },
   getCacheKey() {
     // The output is always the same.

config/webpack/configPlugins.js

@@ -1,13 +1,8 @@
 /* eslint-disable no-param-reassign */
-const webpack = require('webpack');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
 const webpackConfigPlugins = (config, { dev }) => {
-  const plugins = [
-    new webpack.IgnorePlugin(
-      /pages.*\/test.*/,
-    ),
-  ];
+  const plugins = [];
 
   if (process.env.NODE_ENV === 'analyse') {
     plugins.push(

config/webpack/configRules.js

@@ -8,9 +8,15 @@ const srcFolder = [
   path.resolve(__dirname, '../src/redux'),
 ];
 
-const webpackConfigRules = (config, { dev, isServer }) => {
+const webpackConfigRules = (config, { dev }) => {
   // Download fonts and vector graphics instead of direct linking.
   const rules = [
+    {
+      test: /\.(js|jsx)$/,
+      exclude: /(node_modules|bower_components)/,
+      loader: 'babel-loader',
+      options: { presets: ['@babel/preset-env', '@babel/preset-react'] },
+    },
     {
       test: /\.(ttf|eot|svg)$/,
       use: {
@@ -62,27 +68,6 @@ const webpackConfigRules = (config, { dev, isServer }) => {
     });
   }
 
-  if (isServer) {
-    // deal antd style
-    const antStyles = /antd\/.*?\/style.*?/;
-    const origExternals = [...config.externals];
-    config.externals = [
-      (context, request, callback) => {
-        if (request.match(antStyles)) return callback();
-        if (typeof origExternals[0] === 'function') {
-          origExternals[0](context, request, callback);
-        } else {
-          callback();
-        }
-      },
-      ...(typeof origExternals[0] === 'function' ? [] : origExternals),
-    ];
-    config.module.rules.unshift({
-      test: antStyles,
-      use: 'null-loader',
-    });
-  }
-
   config.module.rules.push(...rules);
 
   return config;

config/webpack/configSourcemaps.js

@@ -1,15 +1,8 @@
 /* eslint-disable no-param-reassign */
-const webpackConfigSourcemaps = (config, { dev, isServer }) => {
+const webpackConfigSourcemaps = (config, { dev }) => {
   // Add the appropriate sourcemap depending on development or production.
   config.devtool = dev ? 'eval-source-map' : 'source-map';
 
-  // Do not attempt to use `fs` module in client-side.
-  if (!isServer) {
-    config.node = {
-      fs: 'empty',
-    };
-  }
-
   // Add profiling build of React.
   config.resolve.alias = {
     ...config.resolve.alias,

jest.config.js

@@ -11,6 +11,7 @@ module.exports = {
     'react-app-polyfill/jsdom',
     'jest-canvas-mock',
     '<rootDir>/src/__test__/test-utils/matchMedia.mock.js',
+    '<rootDir>/src/__test__/test-utils/jestShim.js',
   ],
   setupFilesAfterEnv: [
     '<rootDir>/src/__test__/test-utils/setupTests.js',
@@ -25,14 +26,14 @@ module.exports = {
     'endUserMessages\\.js',
     'pipelineStatusValues\\.js',
   ],
+  testEnvironment: 'jsdom',
   testPathIgnorePatterns: [
     '.*\\.mock\\.js',
     'test-utils',
   ],
   transform: {
     '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
     '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
   },
   transformIgnorePatterns: [
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
@@ -44,6 +45,7 @@ module.exports = {
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
     '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+    uuid: require.resolve('uuid'), // https://stackoverflow.com/a/73203803
   },
   moduleFileExtensions: [
     'web.js',

next.config.js

@@ -2,11 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const util = require('util');
-
-const withPlugins = require('next-compose-plugins');
-const less = require('@zeit/next-less');
-const css = require('@zeit/next-css');
-const images = require('next-images');
+const withAntdLess = require('next-plugin-antd-less');
 
 const lessToJS = require('less-vars-to-js');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
@@ -29,23 +25,22 @@ const themeVariables = lessToJS(
   ),
 );
 
-// fix antd bug in dev development
-const devAntd = '@import "~antd/dist/antd.less";\n';
-const stylesData = fs.readFileSync(
-  path.resolve(__dirname, './assets/_styles.less'),
-  'utf-8',
-);
-fs.writeFileSync(
-  path.resolve(__dirname, './assets/self-styles.less'),
-  isDev ? `${devAntd}${stylesData}` : stylesData,
-  'utf-8',
-);
-
 // fix: prevents error when .css files are required by node
 if (typeof require !== 'undefined') {
   require.extensions['.less'] = () => { };
 }
 
+let accountId = process.env.AWS_ACCOUNT_ID;
+if (isDev) {
+  if (process.env.DEV_ACCOUNT === undefined) {
+    throw new Error(
+      `In local environment, DEV_ACCOUNT is expected to be set, possible values are: ${Object.keys(AccountId)} or "other" for other aws accounts`,
+    );
+  }
+
+  accountId = AccountId[process.env.DEV_ACCOUNT];
+}
+
 const nextConfig = {
   // Redirects enforced by Next.
   async redirects() {
@@ -68,8 +63,13 @@ const nextConfig = {
     ];
   },
   experimental: {
-    productionBrowserSourceMaps: true,
+    esmExternals: 'loose',
   },
+  publicRuntimeConfig: {
+    domainName: process.env.DOMAIN_NAME,
+    accountId,
+  },
+  productionBrowserSourceMaps: true,
   webpack: (config, params) => {
     const { dev } = params;
 
@@ -99,32 +99,20 @@ const nextConfig = {
   },
 };
 
-let accountId = process.env.AWS_ACCOUNT_ID;
-if (isDev) {
-  if (process.env.DEV_ACCOUNT === undefined) {
-    throw new Error(
-      `In local environment, DEV_ACCOUNT is expected to be set, possible values are: ${Object.keys(AccountId)} or "other" for other aws accounts`,
-    );
-  }
-
-  accountId = AccountId[process.env.DEV_ACCOUNT];
-}
-
-module.exports = withPlugins([
+const plugins = [
   [withBundleAnalyzer],
-  [images],
-  [less, {
-    lessLoaderOptions: {
-      javascriptEnabled: true,
-      modifyVars: themeVariables,
-      localIdentName: '[local]___[hash:base64:5]',
-    },
+  [withAntdLess, {
+    modifyVars: themeVariables,
+    localIdentName: '[local]--[hash:base64:4]',
   }],
-  [css],
-  {
-    publicRuntimeConfig: {
-      domainName: process.env.DOMAIN_NAME,
-      accountId,
-    },
+];
+
+module.exports = () => plugins.reduce(
+  (acc, plugin) => {
+    if (!Array.isArray(plugin)) return plugin(acc);
+
+    const [fn, params] = plugin;
+    return fn(acc, params);
   },
-], nextConfig);
+  nextConfig,
+);