refactor(babel): convert from import to require in webpack configs and correct babel config resolve

Author: taymoork2

scripts/webpack/webpack.base.babel.js

@@ -1,18 +1,18 @@
-import path from 'path';
+const path = require('path');
 
-import webpack from 'webpack';
-import dotenv from 'dotenv';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-
-import {version} from '../../package.json';
+const webpack = require('webpack');
+const dotenv = require('dotenv');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const postcssPresetEnv = require('postcss-preset-env');
 
+const {version} = require('../../package.json');
+
 dotenv.config();
 
 process.env.REACT_CISCOSPARK_VERSION = version;
 
-export default (options, env) => {
+module.exports = (options, env) => {
   const packageJson = require('../../package.json');
   const plugins = [
     new webpack.EnvironmentPlugin([
@@ -75,7 +75,12 @@ export default (options, env) => {
             '/__fixtures__/',
             '/__mocks__/'
           ],
-          use: ['babel-loader']
+          use: {
+            loader: 'babel-loader',
+            options: {
+              rootMode: 'upward'
+            }
+          }
         },
         {
           test: /\.css$/,

scripts/webpack/webpack.dev.babel.js

@@ -3,10 +3,10 @@
  * webpack dev server and we are bundling into a single js file.
  */
 
-import webpack from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-import webpackConfigBase from './webpack.base.babel';
+const webpackConfigBase = require('./webpack.base.babel');
 
 const plugins = [
   new HtmlWebpackPlugin({
@@ -26,7 +26,7 @@ const plugins = [
 ];
 
 // env config object from command line: https://webpack.js.org/guides/environment-variables/
-export default (env) => webpackConfigBase({
+module.exports = (env) => webpackConfigBase({
   entry: './index.js',
   mode: 'development',
   plugins,

scripts/webpack/webpack.prod.babel.js

@@ -3,13 +3,13 @@
  */
 /* eslint no-sync:0 */
 
-import path from 'path';
-import fs from 'fs';
+const path = require('path');
+const fs = require('fs');
 
-import webpack from 'webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-import webpackBaseConfig from './webpack.base.babel';
+const webpackBaseConfig = require('./webpack.base.babel');
 
 const plugins = [
   new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
@@ -48,7 +48,7 @@ if (fs.existsSync('./src/index.html')) {
 const publicPath = process.env.BUILD_PUBLIC_PATH;
 
 // env config object from command line: https://webpack.js.org/guides/environment-variables/
-export default (env) => webpackBaseConfig({
+module.exports = (env) => webpackBaseConfig({
   mode: 'production',
   entry: './index.js',
   output: {

webpack.config.babel.js

@@ -1,4 +1,4 @@
 // Config for starting Dev Server
-import webpackDevConfig from './scripts/webpack/webpack.dev.babel';
+const webpackDevConfig = require('./scripts/webpack/webpack.dev.babel');
 
 export default webpackDevConfig;