Upgrade webpack from 4 to 5

Summary: Upgrade to webpack5 so that we don't have to pass `NODE_OPTIONS=--openssl-legacy-provider` for all the commands.

Reviewed By: andreqi

Differential Revision: D60187892

fbshipit-source-id: 8792275247a786c0624cbde9e276199e2036dcae

Author: tyao1

package.json

@@ -117,7 +117,7 @@
     "firefox-profile": "^1.0.2",
     "flow-bin": "^0.113.0",
     "fs-extra": "^3.0.1",
-    "graphql": "^14.4.2",
+    "graphql": "^16.9.0",
     "jest": "^24.9.0",
     "lint-staged": "^7.0.5",
     "local-storage-fallback": "^4.1.1",
@@ -140,9 +140,9 @@
     "scheduler": "^0.0.0-50b50c26f",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
-    "webpack": "^4.41.3",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.10.0",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
     "yargs": "^14.2.0"
   }
 }

packages/relay-devtools-core/webpack.backend.js

@@ -6,7 +6,7 @@
  */
 
 const { resolve } = require('path');
-const { DefinePlugin } = require('webpack');
+const Webpack = require('webpack');
 const {
   getGitHubIssuesURL,
   getGitHubURL,
@@ -29,7 +29,7 @@ const DEVTOOLS_FEEDBACK_GROUP = getInternalDevToolsFeedbackGroup();
 
 module.exports = {
   mode: 'development', // TODO TESTING __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  devtool: __DEV__ ? 'eval-cheap-module-source-map' : false,
   entry: {
     backend: './src/backend.js',
   },
@@ -38,16 +38,18 @@ module.exports = {
     filename: '[name].js',
 
     // This name is important; standalone references it in order to connect.
-    library: 'RelayDevToolsBackend',
-    libraryTarget: 'umd',
+    library: {
+      name:'RelayDevToolsBackend',
+      type: 'umd',
+    }
   },
   resolve: {
     alias: {
       src: resolve(__dirname, '../../src'),
     },
   },
   plugins: [
-    new DefinePlugin({
+    new Webpack.DefinePlugin({
       __DEV__: true,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,

packages/relay-devtools-core/webpack.standalone.js

@@ -6,7 +6,7 @@
  */
 
 const { resolve } = require('path');
-const { DefinePlugin } = require('webpack');
+const Webpack = require('webpack');
 const {
   getGitHubIssuesURL,
   getGitHubURL,
@@ -29,24 +29,26 @@ const DEVTOOLS_FEEDBACK_GROUP = getInternalDevToolsFeedbackGroup();
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  devtool: __DEV__ ? 'eval-cheap-module-source-map' : false,
   target: 'electron-main',
   entry: {
     standalone: './src/standalone.js',
   },
   output: {
     path: __dirname + '/dist',
     filename: '[name].js',
-    library: '[name]',
-    libraryTarget: 'commonjs2',
+    library: {
+      name: '[name]',
+      type: 'commonjs2',
+    },
   },
   resolve: {
     alias: {
       src: resolve(__dirname, '../../src'),
     },
   },
   plugins: [
-    new DefinePlugin({
+    new Webpack.DefinePlugin({
       __DEV__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,

shells/browser/shared/webpack.backend.js

@@ -31,7 +31,7 @@ const DEVTOOLS_FEEDBACK_GROUP = getInternalDevToolsFeedbackGroup();
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  devtool: __DEV__ ? 'eval-cheap-module-source-map' : false,
   entry: {
     backend: './src/backend.js',
   },

shells/browser/shared/webpack.config.js

@@ -31,7 +31,7 @@ const DEVTOOLS_FEEDBACK_GROUP = getInternalDevToolsFeedbackGroup();
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
+  devtool: __DEV__ ? 'eval-cheap-module-source-map' : false,
   entry: {
     background: './src/background.js',
     contentScript: './src/contentScript.js',

shells/dev/relay-app/FriendsList/createInBrowserNetwork.js

@@ -152,7 +152,7 @@ function createInBrowserNetwork() {
   function fetchQuery(request, variables) {
     return new Promise(resolve => {
       setTimeout(() => {
-        resolve(graphql(schema, request.text, root, null, variables));
+        resolve(graphql({schema, source: request.text, rootValue:root,  variableValues: variables}));
       }, 1000 + Math.round(Math.random() * 1000));
     });
   }

shells/dev/webpack.config.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const { resolve } = require('path');
-const { DefinePlugin } = require('webpack');
+const Webpack = require('webpack');
 const {
   getGitHubIssuesURL,
   getGitHubURL,
   getInternalDevToolsFeedbackGroup,
   getVersionString,
 } = require('../utils');
+const path = require('path');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
@@ -43,11 +43,11 @@ const config = {
   },
   resolve: {
     alias: {
-      src: resolve(__dirname, '../../src'),
+      src: path.resolve(__dirname, '../../src'),
     },
   },
   plugins: [
-    new DefinePlugin({
+    new Webpack.DefinePlugin({
       __DEV__: __DEV__,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
@@ -84,18 +84,18 @@ const config = {
   },
 };
 
+config.output = {
+  path: path.resolve(__dirname, 'dist'),
+  filename: '[name].js',
+  publicPath: '/dist/',
+};
 if (TARGET === 'local') {
   config.devServer = {
+    static: {
+      directory:path.join(__dirname, '/'),
+    },
     hot: true,
     port: 8080,
-    clientLogLevel: 'warning',
-    publicPath: '/dist/',
-    stats: 'errors-only',
-  };
-} else {
-  config.output = {
-    path: resolve(__dirname, 'dist'),
-    filename: '[name].js',
   };
 }