fix: fixed webpack 5 issue (#786)

* added plugin to fix webpack issue
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

* install process
Signed-off-by: Allison Suarez Miranda <asuarezmiranda@lyft.com>

amundsen_application/static/.storybook/webpack.config.js

@@ -3,6 +3,7 @@
 
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
 
 function resolve(dir) {
   return path.join(__dirname, dir);
@@ -61,7 +62,7 @@ module.exports = {
         test: FONT_PATTERN,
         use: 'file-loader',
       },
-    ]
+    ],
   },
   resolve: {
     extensions: RESOLVED_EXTENSIONS,
@@ -74,4 +75,10 @@ module.exports = {
       utils: PATHS.utils,
     },
   },
+  plugins: [
+    // fix "process is not defined" error:
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+  ],
 };

amundsen_application/static/package-lock.json

@@ -31028,8 +31028,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.0",

amundsen_application/static/package.json

@@ -135,6 +135,7 @@
     "jquery": "^3.5.0",
     "moment-timezone": "^0.5.31",
     "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
     "react": "^16.13.1",
     "react-avatar": "^2.5.1",
     "react-bootstrap": "^0.32.4",

amundsen_application/static/webpack.common.ts

@@ -128,6 +128,10 @@ const config: webpack.Configuration = {
     new CleanWebpackPlugin(),
     new MomentLocalesPlugin(), // To strip all locales except “en”
     ...htmlWebpackPluginConfig,
+    // fix "process is not defined" error:
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
   ],
   optimization: {
     moduleIds: 'deterministic',

amundsen_application/static/webpack.dev.ts

@@ -4,6 +4,8 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 import commonConfig from './webpack.common';
 
+const webpack = require('webpack');
+
 export default merge(commonConfig, {
   mode: 'development',
   devtool: 'inline-source-map',
@@ -11,6 +13,10 @@ export default merge(commonConfig, {
     new MiniCssExtractPlugin({
       filename: '[name].dev.css',
     }),
+    // fix "process is not defined" error:
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
     // new BundleAnalyzerPlugin()     // Uncomment to check the bundle size on dev
   ],
   output: {

amundsen_application/static/webpack.prod.ts

@@ -3,6 +3,8 @@ import merge from 'webpack-merge';
 import TerserPlugin from 'terser-webpack-plugin';
 import commonConfig from './webpack.common';
 
+const webpack = require('webpack');
+
 export default merge(commonConfig, {
   mode: 'production',
   optimization: {
@@ -19,5 +21,9 @@ export default merge(commonConfig, {
     new MiniCssExtractPlugin({
       filename: '[name].[contenthash].css',
     }),
+    // fix "process is not defined" error:
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
   ],
 });