babel 7 upgrade WIP

Author: r0hit-gupta

.babelrc

@@ -0,0 +1,5 @@
+const presets = [
+  './config/babel/node-ssr',
+];
+
+module.exports = { presets };

babel.config.js

@@ -1,7 +1,9 @@
 /* Babel preset for NodeJS build with support of server-side JSX rendering. */
 
 const _ = require('lodash');
-const config = _.cloneDeep(require('./webpack'));
+const babelConfig = require('./webpack');
+
+const config = babelConfig();
 
 const cssModulesTransformPluginOps = {
   extensions: ['.css', '.scss'],
@@ -12,7 +14,6 @@ const transformAssetsPluginOptions = {
 };
 
 config.plugins = config.plugins.concat([
-  'dynamic-import-node',
   ['transform-assets', transformAssetsPluginOptions],
   ['css-modules-transform', cssModulesTransformPluginOps],
 ]);

config/babel/node-ssr.js

@@ -1,42 +1,47 @@
 /* Babel preset for the Webpack build. */
-
-const reactCssModulesPluginOps = {
-  filetypes: {
-    '.scss': {
-      syntax: 'postcss-scss',
+/* eslint-disable */
+module.exports = () => {
+  const reactCssModulesPluginOps = {
+    filetypes: {
+      '.scss': {
+        syntax: 'postcss-scss',
+      },
     },
-  },
-};
+  };
 
-const config = {
-  presets: [
-    'env',
-    'react',
-    'stage-2',
-  ],
-  plugins: [
-    ['module-resolver', {
-      extensions: ['.js', '.jsx'],
-      root: [
-        './src/shared',
-        './src',
+  const config = {
+    presets: [
+      '@babel/env',
+      '@babel/react',
+    ],
+    plugins: [
+      require('@babel/plugin-syntax-dynamic-import'),
+      require('@babel/plugin-syntax-import-meta'),
+      [require('@babel/plugin-proposal-decorators'), { legacy: true }],
+      [require('@babel/plugin-proposal-class-properties'), { loose: false }],
+      require('@babel/plugin-proposal-json-strings'),
+      [
+        'module-resolver',
+        {
+          extensions: ['.js', '.jsx'],
+          root: ['./src/shared', './src'],
+        },
       ],
-    }],
-    'inline-react-svg',
-    'transform-runtime',
-    ['react-css-modules', reactCssModulesPluginOps],
-  ],
-};
+      'inline-react-svg',
+      [require('@babel/plugin-transform-runtime')],
+      ['react-css-modules', reactCssModulesPluginOps],
+    ],
+  };
 
-switch (process.env.BABEL_ENV) {
-  case 'development':
-    reactCssModulesPluginOps.generateScopedName = '[path][name]___[local]___[hash:base64:6]';
-    config.plugins.push('react-hot-loader/babel');
-    break;
-  case 'production':
-    reactCssModulesPluginOps.generateScopedName = '[hash:base64:6]';
-    break;
-  default:
-}
-
-module.exports = config;
+  switch (process.env.BABEL_ENV) {
+    case 'development':
+      reactCssModulesPluginOps.generateScopedName = '[path][name]___[local]___[hash:base64:6]';
+      config.plugins.push('react-hot-loader/babel');
+      break;
+    case 'production':
+      reactCssModulesPluginOps.generateScopedName = '[hash:base64:6]';
+      break;
+    default:
+  }
+  return config;
+};

config/babel/webpack.js

@@ -86,7 +86,7 @@ module.exports = function configFactory(ops) {
   }
 
   entry.polyfills = _.union(entry.polyfills, [
-    'babel-polyfill',
+    '@babel/polyfill',
     'nodelist-foreach-polyfill',
   ]);
 
@@ -147,7 +147,7 @@ module.exports = function configFactory(ops) {
         loader: 'babel-loader',
         options: {
           babelrc: false,
-          forceEnv: o.babelEnv,
+          envName: o.babelEnv,
           presets: ['topcoder-react-utils/config/babel/webpack'],
         },
       }, {

config/webpack/app-base.js

@@ -110,7 +110,7 @@ module.exports = function configFactory(ops) {
         loader: 'babel-loader',
         options: {
           babelrc: false,
-          forceEnv: ops.babelEnv,
+          envName: ops.babelEnv,
           presets: ['topcoder-react-utils/config/babel/webpack'],
         },
       }, {