[7.x] [build] Removes commonjs transforms (#66506) (#67375)

Co-authored-by: spalger <[email protected]>
Co-authored-by: Elastic Machine <[email protected]>

package.json

@@ -118,6 +118,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.9.0",
     "@babel/register": "^7.9.0",
     "@elastic/apm-rum": "^5.1.1",
     "@elastic/charts": "19.2.0",

packages/kbn-babel-preset/package.json

@@ -7,8 +7,6 @@
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.1",
     "@babel/preset-typescript": "^7.9.0",

packages/kbn-babel-preset/webpack_preset.js

@@ -33,8 +33,6 @@ module.exports = () => {
       require('./common_preset'),
     ],
     plugins: [
-      require.resolve('@babel/plugin-transform-modules-commonjs'),
-      require.resolve('@babel/plugin-syntax-dynamic-import'),
       [
         require.resolve('babel-plugin-styled-components'),
         {

packages/kbn-i18n/src/angular/index.ts

@@ -17,6 +17,11 @@
  * under the License.
  */
 
-export { I18nProvider, I18nServiceType } from './provider';
+export { I18nProvider } from './provider';
+
 export { i18nFilter } from './filter';
 export { i18nDirective } from './directive';
+
+// re-export types: https://github.com/babel/babel-loader/issues/603
+import { I18nServiceType as _I18nServiceType } from './provider';
+export type I18nServiceType = _I18nServiceType;

packages/kbn-i18n/src/react/index.tsx

@@ -17,9 +17,11 @@
  * under the License.
  */
 
+import { InjectedIntl as _InjectedIntl } from 'react-intl';
+export type InjectedIntl = _InjectedIntl;
+
 export {
   intlShape,
-  InjectedIntl,
   FormattedDate,
   FormattedTime,
   FormattedRelative,

packages/kbn-interpreter/.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": ["@kbn/babel-preset/webpack_preset"],
   "plugins": [
+    "@babel/plugin-transform-modules-commonjs",
     ["@babel/plugin-transform-runtime", {
       "regenerator": true
     }]

packages/kbn-interpreter/package.json

@@ -18,6 +18,7 @@
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-modules-commonjs": "^7.9.0",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@kbn/babel-preset": "1.0.0",
     "@kbn/dev-utils": "1.0.0",

packages/kbn-optimizer/src/integration_tests/basic_optimization.test.ts

@@ -37,6 +37,19 @@ expect.addSnapshotSerializer({
   test: (value: any) => typeof value === 'string' && value.includes(REPO_ROOT),
 });
 
+const log = new ToolingLog({
+  level: 'error',
+  writeTo: {
+    write(chunk) {
+      if (chunk.endsWith('\n')) {
+        chunk = chunk.slice(0, -1);
+      }
+      // eslint-disable-next-line no-console
+      console.error(chunk);
+    },
+  },
+});
+
 beforeAll(async () => {
   await del(TMP_DIR);
   await cpy('**/*', MOCK_REPO_DIR, {
@@ -55,23 +68,11 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
     repoRoot: MOCK_REPO_DIR,
     pluginScanDirs: [Path.resolve(MOCK_REPO_DIR, 'plugins')],
     maxWorkerCount: 1,
-    dist: true,
+    dist: false,
   });
 
   expect(config).toMatchSnapshot('OptimizerConfig');
 
-  const log = new ToolingLog({
-    level: 'error',
-    writeTo: {
-      write(chunk) {
-        if (chunk.endsWith('\n')) {
-          chunk = chunk.slice(0, -1);
-        }
-        // eslint-disable-next-line no-console
-        console.error(chunk);
-      },
-    },
-  });
   const msgs = await runOptimizer(config)
     .pipe(logOptimizerState(log, config), toArray())
     .toPromise();
@@ -128,13 +129,6 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
   );
   assert('produce zero unexpected states', otherStates.length === 0, otherStates);
 
-  expectFileMatchesSnapshotWithCompression('plugins/foo/target/public/foo.plugin.js', 'foo bundle');
-  expectFileMatchesSnapshotWithCompression(
-    'plugins/foo/target/public/1.plugin.js',
-    '1 async bundle'
-  );
-  expectFileMatchesSnapshotWithCompression('plugins/bar/target/public/bar.plugin.js', 'bar bundle');
-
   const foo = config.bundles.find((b) => b.id === 'foo')!;
   expect(foo).toBeTruthy();
   foo.cache.refresh();
@@ -180,7 +174,7 @@ it('uses cache on second run and exist cleanly', async () => {
     repoRoot: MOCK_REPO_DIR,
     pluginScanDirs: [Path.resolve(MOCK_REPO_DIR, 'plugins')],
     maxWorkerCount: 1,
-    dist: true,
+    dist: false,
   });
 
   const msgs = await runOptimizer(config)
@@ -206,6 +200,24 @@ it('uses cache on second run and exist cleanly', async () => {
   `);
 });
 
+it('prepares assets for distribution', async () => {
+  const config = OptimizerConfig.create({
+    repoRoot: MOCK_REPO_DIR,
+    pluginScanDirs: [Path.resolve(MOCK_REPO_DIR, 'plugins')],
+    maxWorkerCount: 1,
+    dist: true,
+  });
+
+  await runOptimizer(config).pipe(logOptimizerState(log, config), toArray()).toPromise();
+
+  expectFileMatchesSnapshotWithCompression('plugins/foo/target/public/foo.plugin.js', 'foo bundle');
+  expectFileMatchesSnapshotWithCompression(
+    'plugins/foo/target/public/1.plugin.js',
+    '1 async bundle'
+  );
+  expectFileMatchesSnapshotWithCompression('plugins/bar/target/public/bar.plugin.js', 'bar bundle');
+});
+
 /**
  * Verifies that the file matches the expected output and has matching compressed variants.
  */

src/core/public/legacy/legacy_service.ts

@@ -46,7 +46,10 @@ interface StartDeps {
 }
 
 interface BootstrapModule {
-  bootstrap: MountPoint;
+  bootstrap?: MountPoint;
+  default?: {
+    bootstrap: MountPoint;
+  };
 }
 
 /**
@@ -171,10 +174,16 @@ export class LegacyPlatformService {
       throw new Error('Bootstrap module must be loaded before `start`');
     }
 
-    this.targetDomElement = targetDomElement;
-
     // `targetDomElement` is always defined when in legacy mode
-    this.bootstrapModule.bootstrap(this.targetDomElement!);
+    this.targetDomElement = targetDomElement!;
+
+    if (this.bootstrapModule.default) {
+      this.bootstrapModule.default.bootstrap(this.targetDomElement);
+    } else if (this.bootstrapModule.bootstrap) {
+      this.bootstrapModule.bootstrap(this.targetDomElement);
+    } else {
+      throw new Error('legacy bootstrap module does not export a bootstrap() function');
+    }
   }
 
   public stop() {

src/legacy/core_plugins/kibana/public/__tests__/vis_type_vislib/visualizations/area_chart.js

@@ -26,12 +26,18 @@ import { getMockUiState } from '../../../../../../../plugins/vis_type_vislib/pub
 import { getVis } from '../_vis_fixture';
 
 const dataTypesArray = {
-  'series pos': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/date_histogram/_series'),
-  'series pos neg': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/date_histogram/_series_pos_neg'),
-  'series neg': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/date_histogram/_series_neg'),
-  'term columns': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/terms/_columns'),
-  'range rows': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/range/_rows'),
-  stackedSeries: require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/date_histogram/_stacked_series'),
+  'series pos': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/date_histogram/_series')
+    .default,
+  'series pos neg': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/date_histogram/_series_pos_neg')
+    .default,
+  'series neg': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/date_histogram/_series_neg')
+    .default,
+  'term columns': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/terms/_columns')
+    .default,
+  'range rows': require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/range/_rows')
+    .default,
+  stackedSeries: require('../../../../../../../plugins/vis_type_vislib/public/fixtures/mock_data/date_histogram/_stacked_series')
+    .default,
 };
 
 const visLibParams = {

src/legacy/core_plugins/timelion/public/app.js

@@ -23,6 +23,7 @@ import 'angular-sanitize';
 
 import { i18n } from '@kbn/i18n';
 
+import routes from 'ui/routes';
 import { capabilities } from 'ui/capabilities';
 import { docTitle } from 'ui/doc_title';
 import { fatalError, toastNotifications } from 'ui/notify';
@@ -44,6 +45,7 @@ import './directives/saved_object_save_as_checkbox';
 import './services/saved_sheet_register';
 
 import rootTemplate from 'plugins/timelion/index.html';
+import { uiModules } from 'ui/modules';
 
 import { loadKbnTopNavDirectives } from '../../../../plugins/kibana_legacy/public';
 loadKbnTopNavDirectives(npStart.plugins.navigation.ui);
@@ -60,11 +62,11 @@ require('plugins/timelion/directives/timelion_options_sheet');
 
 document.title = 'Timelion - Kibana';
 
-const app = require('ui/modules').get('apps/timelion', ['i18n', 'ngSanitize']);
+const app = uiModules.get('apps/timelion', ['i18n', 'ngSanitize']);
 
-require('ui/routes').enable();
+routes.enable();
 
-require('ui/routes').when('/:id?', {
+routes.when('/:id?', {
   template: rootTemplate,
   reloadOnSearch: false,
   k7Breadcrumbs: ($injector, $route) =>

src/legacy/core_plugins/timelion/public/directives/cells/cells.js

@@ -19,12 +19,13 @@
 
 import _ from 'lodash';
 import { move } from 'ui/utils/collection';
+import { uiModules } from 'ui/modules';
 
 require('angular-sortable-view');
 require('plugins/timelion/directives/chart/chart');
 require('plugins/timelion/directives/timelion_grid');
 
-const app = require('ui/modules').get('apps/timelion', ['angular-sortable-view']);
+const app = uiModules.get('apps/timelion', ['angular-sortable-view']);
 import html from './cells.html';
 
 app.directive('timelionCells', function () {

src/legacy/core_plugins/timelion/public/directives/fixed_element.js

@@ -18,8 +18,9 @@
  */
 
 import $ from 'jquery';
+import { uiModules } from 'ui/modules';
 
-const app = require('ui/modules').get('apps/timelion', []);
+const app = uiModules.get('apps/timelion', []);
 app.directive('fixedElementRoot', function () {
   return {
     restrict: 'A',

src/legacy/core_plugins/timelion/public/directives/fullscreen/fullscreen.js

@@ -17,11 +17,13 @@
  * under the License.
  */
 
-require('angular-sortable-view');
-require('plugins/timelion/directives/chart/chart');
-require('plugins/timelion/directives/timelion_grid');
+import { uiModules } from 'ui/modules';
 
-const app = require('ui/modules').get('apps/timelion', ['angular-sortable-view']);
+import 'angular-sortable-view';
+import 'plugins/timelion/directives/chart/chart';
+import 'plugins/timelion/directives/timelion_grid';
+
+const app = uiModules.get('apps/timelion', ['angular-sortable-view']);
 import html from './fullscreen.html';
 
 app.directive('timelionFullscreen', function () {

src/legacy/core_plugins/timelion/public/directives/timelion_grid.js

@@ -18,8 +18,9 @@
  */
 
 import $ from 'jquery';
+import { uiModules } from 'ui/modules';
 
-const app = require('ui/modules').get('apps/timelion', []);
+const app = uiModules.get('apps/timelion', []);
 app.directive('timelionGrid', function () {
   return {
     restrict: 'A',

src/legacy/ui/public/new_platform/new_platform.test.mocks.ts

@@ -22,7 +22,9 @@ import { scopedHistoryMock } from '../../../../core/public/mocks';
 export const setRootControllerMock = jest.fn();
 
 jest.doMock('ui/chrome', () => ({
-  setRootController: setRootControllerMock,
+  default: {
+    setRootController: setRootControllerMock,
+  },
 }));
 
 export const historyMock = scopedHistoryMock.create();

src/legacy/ui/public/new_platform/new_platform.ts

@@ -174,7 +174,9 @@ export const legacyAppRegister = (app: App<any>) => {
   }
   legacyAppRegistered = true;
 
-  require('ui/chrome').setRootController(app.id, ($scope: IScope, $element: JQLite) => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { default: chrome } = require('ui/chrome');
+  chrome.setRootController(app.id, ($scope: IScope, $element: JQLite) => {
     const element = document.createElement('div');
     $element[0].appendChild(element);
 

src/optimize/base_optimizer.js

@@ -45,6 +45,10 @@ const STATS_WARNINGS_FILTER = new RegExp(
   ].join('')
 );
 
+const LEGACY_PRESETS = {
+  plugins: [require.resolve('@babel/plugin-transform-modules-commonjs')],
+};
+
 function recursiveIssuer(m) {
   if (m.issuer) {
     return recursiveIssuer(m.issuer);
@@ -119,7 +123,7 @@ export default class BaseOptimizer {
   }
 
   warmupThreadLoaderPool() {
-    const baseModules = ['babel-loader', BABEL_PRESET_PATH];
+    const baseModules = ['babel-loader', BABEL_PRESET_PATH, LEGACY_PRESETS];
 
     threadLoader.warmup(
       // pool options, like passed to loader options

src/optimize/create_ui_exports_module.js

@@ -22,7 +22,7 @@ function normalizePath(path) {
   return path.replace(/[\\\/]+/g, '/');
 }
 
-export default function () {
+module.exports = function () {
   if (!module.id.includes('?')) {
     throw new Error('create_ui_exports_module loaded without JSON args in module.id');
   }
@@ -37,4 +37,4 @@ export default function () {
   return {
     code: `${comment}\n${requires}\n`,
   };
-}
+};

src/plugins/apm_oss/server/index.ts

@@ -45,6 +45,8 @@ export { APMOSSPluginSetup } from './plugin';
 
 export { apmIndexPattern };
 
+export { APM_STATIC_INDEX_PATTERN_ID } from '../common/index_pattern_constants';
+
 export {
   createNodeAgentInstructions,
   createDjangoAgentInstructions,

src/plugins/discover/public/application/angular/context_app.js

@@ -36,9 +36,7 @@ import {
 } from './context/query';
 import { callAfterBindingsWorkaround } from './context/helpers/call_after_bindings_workaround';
 
-const module = getAngularModule();
-
-module.directive('contextApp', function ContextApp() {
+getAngularModule().directive('contextApp', function ContextApp() {
   return {
     bindToController: true,
     controller: callAfterBindingsWorkaround(ContextAppController),