Update dependencies; Remove buggy webpack-image-loader;

Author: flexdinesh

.babelrc

@@ -6,7 +6,7 @@
  */
 
 // Needed for redux-saga es6 generator support
-import 'babel-polyfill';
+import '@babel/polyfill';
 
 // Import all the third party stuff
 import React from 'react';

app/app.js

@@ -0,0 +1,26 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false
+      }
+    ],
+    '@babel/preset-react'
+  ],
+  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-syntax-dynamic-import'],
+  env: {
+    production: {
+      only: ['app'],
+      plugins: [
+        'lodash',
+        'transform-react-remove-prop-types',
+        '@babel/plugin-transform-react-inline-elements',
+        '@babel/plugin-transform-react-constant-elements'
+      ]
+    },
+    test: {
+      plugins: ['@babel/plugin-transform-modules-commonjs', 'dynamic-import-node']
+    }
+  }
+};

babel.config.js

@@ -16,9 +16,12 @@ module.exports = {
   },
   coverageReporters: ['json', 'lcov', 'text-summary'],
   moduleDirectories: ['node_modules', 'app'],
+  transform: {
+    '^.+\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest'
+  },
+  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$', '^.+\\.module\\.(css|sass|scss)$'],
   moduleNameMapper: {
-    '.*\\.(css|less|styl|scss|sass)$':
-      '<rootDir>/config/jest-mocks/cssModule.js',
+    '.*\\.(css|less|styl|scss|sass)$': '<rootDir>/config/jest-mocks/cssModule.js',
     '.*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/config/jest-mocks/image.js'
   },

config/jest.config.js

@@ -1,6 +1,6 @@
 // needed for regenerator-runtime
 // (ES7 generator support is required by redux-saga)
-import 'babel-polyfill';
+import '@babel/polyfill';
 
 // Enzyme adapter for React 16
 import Enzyme from 'enzyme';

config/test-setup.js

@@ -10,61 +10,43 @@ process.noDeprecation = true;
 module.exports = (options) => ({
   mode: options.mode,
   entry: options.entry,
-  output: Object.assign({ // Compile into js/build.js
-    path: path.resolve(process.cwd(), 'build'),
-    publicPath: '/',
-  }, options.output), // Merge with env dependent settings
+  output: Object.assign(
+    {
+      // Compile into js/build.js
+      path: path.resolve(process.cwd(), 'build'),
+      publicPath: '/'
+    },
+    options.output
+  ), // Merge with env dependent settings
   module: {
     rules: [
       {
         test: /\.js$/, // Transform all .js files required somewhere with Babel
         exclude: /node_modules/,
         use: {
           loader: 'babel-loader',
-          options: options.babelQuery,
-        },
+          options: options.babelQuery
+        }
       },
       {
         // Preprocess our own .scss files
         test: /\.scss$/,
         exclude: /node_modules/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
+        use: ['style-loader', 'css-loader', 'sass-loader']
       },
       {
         // Preprocess 3rd party .css files located in node_modules
         test: /\.css$/,
         include: /node_modules/,
-        use: ['style-loader', 'css-loader'],
+        use: ['style-loader', 'css-loader']
       },
       {
         test: /\.(eot|svg|otf|ttf|woff|woff2)$/,
-        use: 'file-loader',
+        use: 'file-loader'
       },
       {
         test: /\.(jpg|png|gif)$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              query: {
-                gifsicle: {
-                  interlaced: true
-                },
-                mozjpeg: {
-                  progressive: true
-                },
-                optipng: {
-                  optimizationLevel: 7
-                },
-                pngquant: {
-                  quality: '65-90',
-                  speed: 4
-                }
-              }
-            },
-          },
-        ],
+        use: 'file-loader'
       },
       {
         test: /\.html$/,
@@ -76,10 +58,10 @@ module.exports = (options) => ({
           loader: 'url-loader',
           options: {
             limit: 10000
-          },
-        },
-      },
-    ],
+          }
+        }
+      }
+    ]
   },
   plugins: options.plugins.concat([
     new webpack.ProvidePlugin({
@@ -93,22 +75,13 @@ module.exports = (options) => ({
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-      },
+      }
     })
   ]),
   resolve: {
     modules: ['app', 'node_modules'],
-    extensions: [
-      '.js',
-      '.jsx',
-      '.scss',
-      '.react.js'
-    ],
-    mainFields: [
-      'browser',
-      'jsnext:main',
-      'main'
-    ]
+    extensions: ['.js', '.jsx', '.scss', '.react.js'],
+    mainFields: ['browser', 'jsnext:main', 'main']
   },
   devtool: options.devtool,
   target: 'web', // Make web variables accessible to webpack, e.g. window