[canvas] Improve plugin pre-build (#25267) (#25569)

Fixes https://github.com/elastic/kibana/issues/23552

Extends the webpack config used to pre-build `x-pack/plugins/canvas/canvas_plugins_src` so that it does a couple things:
 - use the "browser" and "main" fields when defined by packages, this allows the already transpiled output of packages like `@elastic/eui` to be used rather than rebuilding from source
 - use the `@kbn/babel-preset/webpack_preset` for babel-loader
 - include all errors in the log output when an error occurs

x-pack/package.json

@@ -142,6 +142,7 @@
     "apollo-server-hapi": "^1.3.6",
     "axios": "^0.18.0",
     "babel-core": "^6.26.0",
+    "babel-polyfill": "6.20.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-register": "^6.26.0",
     "babel-runtime": "^6.26.0",

x-pack/plugins/canvas/canvas_plugin_src/elements/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { elementSpecs } from './index';
 
 elementSpecs.forEach(canvas.register);

x-pack/plugins/canvas/canvas_plugin_src/functions/browser/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { functions } from './index';
 
 functions.forEach(canvas.register);

x-pack/plugins/canvas/canvas_plugin_src/functions/common/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { functions } from './index';
 
 functions.forEach(canvas.register);

x-pack/plugins/canvas/canvas_plugin_src/renderers/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { renderFunctions } from './index';
 
 renderFunctions.forEach(canvas.register);

x-pack/plugins/canvas/canvas_plugin_src/types/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { typeSpecs } from './index';
 
 typeSpecs.forEach(canvas.register);

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { args } from './index';
 
 args.forEach(canvas.register);

x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { datasourceSpecs } from './index';
 
 datasourceSpecs.forEach(canvas.register);

x-pack/plugins/canvas/canvas_plugin_src/uis/models/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { modelSpecs } from './index';
 
 modelSpecs.forEach(canvas.register);

x-pack/plugins/canvas/canvas_plugin_src/uis/transforms/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { transformSpecs } from './index';
 
 transformSpecs.forEach(canvas.register);

x-pack/plugins/canvas/canvas_plugin_src/uis/views/register.js

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import 'babel-polyfill';
 import { viewSpecs } from './index';
 
 viewSpecs.forEach(canvas.register);

x-pack/plugins/canvas/server/lib/route_expression/thread/babeled.js

@@ -15,4 +15,5 @@ require('babel-register')({
   presets: [require.resolve('@kbn/babel-preset/node_preset')],
 });
 
+require('./polyfill');
 require('./worker');

x-pack/plugins/canvas/server/lib/route_expression/thread/polyfill.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// taken from kibana/src/setup_node_env/babel_register/polyfill.js
+// ...
+// `babel-preset-env` looks for and rewrites the following import
+// statement into a list of import statements based on the polyfills
+// necessary for our target environment (the current version of node)
+// but since it does that during compilation, `import 'babel-polyfill'`
+// must be in a file that is loaded with `require()` AFTER `babel-register`
+// is configured.
+//
+// This is why we have this single statement in it's own file and require
+// it from ./babeled.js
+import 'babel-polyfill';

x-pack/plugins/canvas/tasks/helpers/webpack.plugins.js

@@ -23,6 +23,10 @@ module.exports = {
     'functions/common/all': path.join(sourceDir, 'functions/common/register.js'),
     'types/all': path.join(sourceDir, 'types/register.js'),
   },
+
+  // there were problems with the node and web targets since this code is actually
+  // targetting both the browser and node.js. If there was a hybrid target we'd use
+  // it, but this seems to work either way.
   target: 'webworker',
 
   output: {
@@ -33,6 +37,7 @@ module.exports = {
 
   resolve: {
     extensions: ['.js', '.json'],
+    mainFields: ['browser', 'main'],
   },
 
   plugins: [
@@ -47,8 +52,10 @@ module.exports = {
       });
 
       this.plugin('done', function(stats) {
-        if (stats.compilation.errors && stats.compilation.errors.length && !isWatch)
+        if (!stats.hasErrors()) return;
-          throw stats.compilation.errors[0];
+        const errorMessage = stats.toString('errors-only');
+        if (isWatch) console.error(errorMessage);
+        else throw new Error(errorMessage);
       });
     },
     new CopyWebpackPlugin([
@@ -62,64 +69,15 @@ module.exports = {
 
   module: {
     rules: [
-      // There's some React 15 propTypes funny business in EUI, this strips out propTypes and fixes it
       {
-        test: /(@elastic[\/\\]eui|moment)[\/\\].*\.js$/,
+        test: /\.js$/,
+        exclude: [/node_modules/],
         loaders: 'babel-loader',
         options: {
           babelrc: false,
-          presets: [
+          presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
-            'react',
-            [
-              'env',
-              {
-                targets: {
-                  node: 'current',
-                },
-              },
-            ],
-          ],
-          plugins: [
-            'transform-react-remove-prop-types', // specifically this, strips out propTypes
-            'pegjs-inline-precompile',
-            'transform-object-rest-spread',
-            'transform-async-to-generator',
-            'transform-class-properties',
-            [
-              'inline-react-svg',
-              {
-                ignorePattern: 'images/*',
-                svgo: {
-                  plugins: [{ cleanupIDs: false }, { removeViewBox: false }],
-                },
-              },
-            ],
-          ],
         },
       },
-      {
-        test: /\.js$/,
-        loaders: 'babel-loader',
-        options: {
-          plugins: [
-            'transform-object-rest-spread',
-            'transform-async-to-generator',
-            'transform-class-properties',
-          ],
-          presets: [
-            'react',
-            [
-              'env',
-              {
-                targets: {
-                  node: 'current',
-                },
-              },
-            ],
-          ],
-        },
-        exclude: [/node_modules/],
-      },
       {
         test: /\.(png|jpg|gif|jpeg|svg)$/,
         loaders: ['url-loader'],