Revert "build: Convert webpack config to typescript (#26918)"

This reverts commit 949067848dd08c7371b5abb23b11abec4454c13d.

Co-authored-by: evanpurkhiser via Slack <evan.purkhiser@sentry.io>

.storybook/main.ts

@@ -1,6 +1,5 @@
 /* eslint-env node */
 /* eslint import/no-nodejs-modules:0 */
-
 import path from 'path';
 
 import {StorybookConfig} from '@storybook/core-common';

.storybook/webpack.config.ts

@@ -5,7 +5,11 @@ import path from 'path';
 
 import webpack from 'webpack';
 
-import appConfig from '../webpack.config';
+import appConfigAny from '../webpack.config';
+
+// TODO(epurkhiser): Once we convert our webpack.config over to typescript we
+// can remove this
+const appConfig = appConfigAny as any;
 
 const staticPath = path.resolve(__dirname, '..', 'static', 'app');
 

babel.config.ts → babel.config.js

@@ -1,8 +1,5 @@
 /* eslint-env node */
-
-import {TransformOptions} from '@babel/core';
-
-const config: TransformOptions = {
+module.exports = {
   presets: [
     [
       '@babel/preset-react',
@@ -53,8 +50,8 @@ const config: TransformOptions = {
       plugins: [
         '@emotion/babel-plugin',
         '@babel/plugin-transform-react-jsx-source',
-        ...(process.env.SENTRY_UI_HOT_RELOAD ? ['react-refresh/babel'] : []),
-      ],
+        !!process.env.SENTRY_UI_HOT_RELOAD ? 'react-refresh/babel' : null,
+      ].filter(Boolean),
     },
     test: {
       // Required, see https://github.com/facebook/jest/issues/9430
@@ -62,5 +59,3 @@ const config: TransformOptions = {
     },
   },
 };
-
-export default config;

build-utils/integration-docs-fetch-plugin.ts → build-utils/integration-docs-fetch-plugin.js

@@ -1,37 +1,16 @@
 /* eslint-env node */
 /* eslint import/no-nodejs-modules:0 */
-
-import fs from 'fs';
-import https from 'https';
-import path from 'path';
-
-import webpack from 'webpack';
+const fs = require('fs');
+const https = require('https');
+const path = require('path');
 
 const PLATFORMS_URL = 'https://docs.sentry.io/_platforms/_index.json';
 const DOCS_INDEX_PATH = 'src/sentry/integration-docs/_platforms.json';
 
-const alphaSortFromKey =
-  <T>(keyExtractor: (key: T) => string) =>
-  (a: T, b: T) =>
-    keyExtractor(a).localeCompare(keyExtractor(b));
-
-type Platform = {
-  key: string;
-  type: 'language' | 'framework';
-  details: string;
-  doc_link: string;
-  name: string;
-  aliases: string[];
-  categories: string[];
-};
-
-type PlatformItem = {_self: Platform} & Record<string, Platform>;
-
-type PlatformsData = {
-  platforms: Record<string, PlatformItem>;
-};
+const alphaSortFromKey = keyExtractor => (a, b) =>
+  keyExtractor(a).localeCompare(keyExtractor(b));
 
-const transformPlatformsToList = ({platforms}: PlatformsData) =>
+const transformPlatformsToList = ({platforms}) =>
   Object.keys(platforms)
     .map(platformId => {
       const integrationMap = platforms[platformId];
@@ -52,10 +31,29 @@ const transformPlatformsToList = ({platforms}: PlatformsData) =>
     })
     .sort(alphaSortFromKey(item => item.name));
 
-class IntegrationDocsFetchPlugin {
-  modulePath: string;
-  hasRun: boolean;
+function fetch(_compilation, callback) {
+  https
+    .get(PLATFORMS_URL, res => {
+      res.setEncoding('utf8');
+      let buffer = '';
+      res
+        .on('data', data => {
+          buffer += data;
+        })
+        .on('end', () =>
+          fs.writeFile(
+            this.modulePath,
+            JSON.stringify({
+              platforms: transformPlatformsToList(JSON.parse(buffer)),
+            }),
+            callback
+          )
+        );
+    })
+    .on('error', callback);
+}
 
+class IntegrationDocsFetchPlugin {
   constructor({basePath}) {
     this.modulePath = path.join(basePath, DOCS_INDEX_PATH);
     this.hasRun = false;
@@ -65,32 +63,8 @@ class IntegrationDocsFetchPlugin {
     }
   }
 
-  fetch: Parameters<webpack.Compiler['hooks']['beforeRun']['tapAsync']>[1] = (
-    _compilation,
-    callback
-  ) =>
-    https
-      .get(PLATFORMS_URL, res => {
-        res.setEncoding('utf8');
-        let buffer = '';
-        res
-          .on('data', data => {
-            buffer += data;
-          })
-          .on('end', () =>
-            fs.writeFile(
-              this.modulePath,
-              JSON.stringify({
-                platforms: transformPlatformsToList(JSON.parse(buffer)),
-              }),
-              callback
-            )
-          );
-      })
-      .on('error', callback);
-
-  apply(compiler: webpack.Compiler) {
-    compiler.hooks.beforeRun.tapAsync('IntegrationDocsFetchPlugin', this.fetch);
+  apply(compiler) {
+    compiler.hooks.beforeRun.tapAsync('IntegrationDocsFetchPlugin', fetch.bind(this));
 
     compiler.hooks.watchRun.tapAsync(
       'IntegrationDocsFetchPlugin',
@@ -101,11 +75,11 @@ class IntegrationDocsFetchPlugin {
           return;
         }
 
-        this.fetch(compilation, callback);
+        fetch.call(this, compilation, callback);
         this.hasRun = true;
       }
     );
   }
 }
 
-export default IntegrationDocsFetchPlugin;
+module.exports = IntegrationDocsFetchPlugin;

build-utils/last-built-plugin.ts → build-utils/last-built-plugin.js

@@ -1,25 +1,15 @@
 /* eslint-env node */
 /* eslint import/no-nodejs-modules:0 */
-
-import fs from 'fs';
-import path from 'path';
-
-import webpack from 'webpack';
-
-type Options = {
-  basePath: string;
-};
+const path = require('path');
+const fs = require('fs');
 
 class LastBuiltPlugin {
-  basePath: string;
-  isWatchMode: boolean;
-
-  constructor({basePath}: Options) {
+  constructor({basePath}) {
     this.basePath = basePath;
     this.isWatchMode = false;
   }
 
-  apply(compiler: webpack.Compiler) {
+  apply(compiler) {
     compiler.hooks.watchRun.tapAsync('LastBuiltPlugin', (_, callback) => {
       this.isWatchMode = true;
       callback();
@@ -45,5 +35,4 @@ class LastBuiltPlugin {
     });
   }
 }
-
-export default LastBuiltPlugin;
+module.exports = LastBuiltPlugin;

build-utils/sentry-instrumentation.ts → build-utils/sentry-instrumentation.js

@@ -1,12 +1,8 @@
 /* eslint-env node */
 /* eslint import/no-nodejs-modules:0 */
-
-import crypto from 'crypto';
-import https from 'https';
-import os from 'os';
-
-import type Sentry from '@sentry/node';
-import webpack from 'webpack';
+const crypto = require('crypto');
+const https = require('https');
+const os = require('os');
 
 const {
   NODE_ENV,
@@ -15,22 +11,17 @@ const {
   GITHUB_SHA,
   GITHUB_REF,
 } = process.env;
-
 const IS_CI = !!GITHUB_SHA;
 
 const PLUGIN_NAME = 'SentryInstrumentation';
 const GB_BYTE = 1073741824;
 
-const createSignature = function (secret: string, payload: string) {
+const createSignature = function (secret, payload) {
   const hmac = crypto.createHmac('sha1', secret);
   return `sha1=${hmac.update(payload).digest('hex')}`;
 };
 
 class SentryInstrumentation {
-  initialBuild: boolean = false;
-
-  Sentry?: typeof Sentry;
-
   constructor() {
     // Only run if SENTRY_INSTRUMENTATION` is set or when in ci,
     // only in the javascript suite that runs webpack
@@ -38,41 +29,40 @@ class SentryInstrumentation {
       return;
     }
 
-    const sentry = require('@sentry/node');
+    this.initialBuild = false;
+    this.Sentry = require('@sentry/node');
     require('@sentry/tracing'); // This is required to patch Sentry
 
-    sentry.init({
+    this.Sentry.init({
       dsn: 'https://3d282d186d924374800aa47006227ce9@sentry.io/2053674',
       environment: IS_CI ? 'ci' : 'local',
       tracesSampleRate: 1.0,
     });
 
     if (IS_CI) {
-      sentry.setTag('branch', GITHUB_REF);
+      this.Sentry.setTag('branch', GITHUB_REF);
     }
 
     const cpus = os.cpus();
-    sentry.setTag('platform', os.platform());
-    sentry.setTag('arch', os.arch());
-    sentry.setTag(
+    this.Sentry.setTag('platform', os.platform());
+    this.Sentry.setTag('arch', os.arch());
+    this.Sentry.setTag(
       'cpu',
       cpus && cpus.length ? `${cpus[0].model} (cores: ${cpus.length})}` : 'N/A'
     );
-
-    this.Sentry = sentry;
   }
 
   /**
    * Measures the file sizes of assets emitted from the entrypoints
    */
-  measureAssetSizes(compilation: webpack.Compilation) {
+  measureAssetSizes(compilation) {
     if (!SENTRY_WEBPACK_WEBHOOK_SECRET) {
       return;
     }
 
     [...compilation.entrypoints].forEach(([entrypointName, entry]) =>
       entry.chunks.forEach(chunk =>
-        Array.from(chunk.files)
+        chunk.files
           .filter(assetName => !assetName.endsWith('.map'))
           .forEach(assetName => {
             const asset = compilation.assets[assetName];
@@ -106,7 +96,7 @@ class SentryInstrumentation {
     );
   }
 
-  measureBuildTime(startTime: number, endTime: number) {
+  measureBuildTime(startTime, endTime) {
     if (!this.Sentry) {
       return;
     }
@@ -137,7 +127,7 @@ class SentryInstrumentation {
     transaction.finish();
   }
 
-  apply(compiler: webpack.Compiler) {
+  apply(compiler) {
     compiler.hooks.done.tapAsync(
       PLUGIN_NAME,
       async ({compilation, startTime, endTime}, done) => {
@@ -159,5 +149,4 @@ class SentryInstrumentation {
     );
   }
 }
-
-export default SentryInstrumentation;
+module.exports = SentryInstrumentation;

config/webpack.chartcuterie.config.ts → config/webpack.chartcuterie.config.js

@@ -1,28 +1,21 @@
 /* eslint-env node */
 /* eslint import/no-nodejs-modules:0 */
 
-import childProcess from 'child_process';
-import path from 'path';
+const path = require('path');
+const childProcess = require('child_process');
+const webpack = require('webpack');
 
-import webpack from 'webpack';
-
-import baseConfig from '../webpack.config';
+const baseConfig = require('../webpack.config');
 
 const commitHash =
   process.env.SENTRY_BUILD ||
   childProcess.execSync('git rev-parse HEAD').toString().trim();
 
-const findLoader = (loaderName: string) =>
-  baseConfig.module?.rules?.find(
-    rule =>
-      typeof rule === 'object' &&
-      typeof rule.use === 'object' &&
-      !Array.isArray(rule.use) &&
-      rule.use.loader === loaderName
-  ) as webpack.RuleSetRule;
-
-const config: webpack.Configuration = {
-  mode: baseConfig.mode,
+const findLoader = loaderName =>
+  baseConfig.module.rules.find(rule => rule.use.loader === loaderName);
+
+const config = {
+  mode: process.env.NODE_ENV || 'development',
   context: baseConfig.context,
   resolve: baseConfig.resolve,
 
@@ -33,7 +26,7 @@ const config: webpack.Configuration = {
 
   module: {
     rules: [findLoader('babel-loader'), findLoader('po-catalog-loader')],
-    noParse: baseConfig.module?.noParse,
+    noParse: baseConfig.module.noParse,
   },
 
   plugins: [

config/webpack.css.config.js

@@ -0,0 +1,30 @@
+/* eslint-env node */
+/* eslint import/no-nodejs-modules:0 */
+const config = require('../webpack.config');
+
+config.entry = {
+  sentry: 'less/jest-ci.less',
+};
+config.module = {
+  ...config.module,
+  rules: [
+    ...config.module.rules.filter(({test}) =>
+      ['/\\.css/', '/\\.less$/'].includes(test.toString())
+    ),
+
+    {
+      test: /\.(jpe?g|png|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+      use: [
+        {
+          loader: 'url-loader',
+          options: {
+            esModule: false,
+            limit: true,
+          },
+        },
+      ],
+    },
+  ],
+};
+
+module.exports = config;

config/webpack.css.config.ts

@@ -1,34 +0,0 @@
-/* eslint-env node */
-/* eslint import/no-nodejs-modules:0 */
-
-import config from '../webpack.config';
-
-// Select all CSS rules from the base webpack config
-const cssRules =
-  config?.module?.rules?.filter(
-    ruleSet =>
-      typeof ruleSet === 'object' &&
-      ['/\\.css/', '/\\.less$/'].includes(ruleSet.test?.toString() ?? '')
-  ) ?? [];
-
-config.entry = {
-  sentry: 'less/jest-ci.less',
-};
-
-config.module = {
-  ...config?.module,
-  rules: [
-    ...cssRules,
-    {
-      test: /\.(jpe?g|png|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-      use: [
-        {
-          loader: 'url-loader',
-          options: {esModule: false, limit: true},
-        },
-      ],
-    },
-  ],
-};
-
-export default config;

package.json

@@ -23,7 +23,6 @@
     "@emotion/styled": "^11.3.0",
     "@sentry-internal/global-search": "^0.0.43",
     "@sentry/integrations": "6.8.0",
-    "@sentry/node": "6.8.0",
     "@sentry/react": "6.8.0",
     "@sentry/release-parser": "^1.1.4",
     "@sentry/rrweb": "^0.3.1",
@@ -32,9 +31,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@types/color": "^3.0.2",
-    "@types/compression-webpack-plugin": "^6.0.5",
     "@types/create-react-class": "^15.6.2",
-    "@types/css-minimizer-webpack-plugin": "^3.0.1",
     "@types/diff": "5.0.1",
     "@types/dompurify": "^2.2.3",
     "@types/echarts": "^4.9.3",
@@ -43,7 +40,6 @@
     "@types/js-cookie": "^2.2.7",
     "@types/lodash": "^4.14.170",
     "@types/marked": "^0.7.2",
-    "@types/mini-css-extract-plugin": "^1.4.3",
     "@types/papaparse": "^5.2.5",
     "@types/pegjs": "^0.10.3",
     "@types/react": "~17.0.13",
@@ -57,7 +53,6 @@
     "@types/react-virtualized": "^9.21.12",
     "@types/reflux": "0.4.1",
     "@types/scroll-to-element": "^2.0.1",
-    "@types/webpack-dev-server": "^3.11.4",
     "ansicolor": "^1.1.95",
     "babel-loader": "^8.1.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
@@ -142,6 +137,7 @@
   "devDependencies": {
     "@babel/plugin-transform-react-jsx-source": "^7.14.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
+    "@sentry/node": "6.8.0",
     "@size-limit/preset-small-lib": "^4.10.2",
     "@storybook/addon-a11y": "6.3.4",
     "@storybook/addon-actions": "6.3.4",
@@ -219,8 +215,8 @@
     "install-api-docs": "cd api-docs && yarn install",
     "build-derefed-docs": "yarn install-api-docs && node api-docs/index.js api-docs/openapi.json",
     "watch-api-docs": "sane 'yarn build-derefed-docs' api-docs",
-    "build-css": "NODE_ENV=production yarn webpack --config=config/webpack.css.config.ts",
-    "build-chartcuterie-config": "NODE_ENV=production yarn webpack --config=config/webpack.chartcuterie.config.ts",
+    "build-css": "NODE_ENV=production yarn webpack --config=config/webpack.css.config.js",
+    "build-chartcuterie-config": "NODE_ENV=production yarn webpack --config=config/webpack.chartcuterie.config.js",
     "build-acceptance": "IS_ACCEPTANCE_TEST=1 NODE_ENV=production yarn webpack --mode development",
     "build-production": "NODE_ENV=production yarn webpack --mode production",
     "build": "yarn build-production --output-path=public",