From 91010d484b850e1746ac9acf8c112d07dafbfd2f Mon Sep 17 00:00:00 2001
From: Clint Andrew Hall <clint@clintandrewhall.com>
Date: Wed, 14 Apr 2021 17:21:03 -0500
Subject: [PATCH 1/2] Fix canvas storybook webpack config for kbn

---
 x-pack/plugins/canvas/storybook/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/canvas/storybook/webpack.config.js b/x-pack/plugins/canvas/storybook/webpack.config.js
index 77b8d343a2bea..5ff8523c95a5f 100644
--- a/x-pack/plugins/canvas/storybook/webpack.config.js
+++ b/x-pack/plugins/canvas/storybook/webpack.config.js
@@ -20,7 +20,7 @@ module.exports = async ({ config: storybookConfig }) => {
         // Include the React preset from Kibana for JS(X) and TS(X)
         {
           test: /\.(j|t)sx?$/,
-          exclude: /node_modules/,
+          exclude: /node_modules(?!\/@kbn)/,
           loaders: 'babel-loader',
           options: {
             presets: [require.resolve('@kbn/babel-preset/webpack_preset')],

From 3304dc3f67550a39984242eaa77721340e53b217 Mon Sep 17 00:00:00 2001
From: Clint Andrew Hall <clint@clintandrewhall.com>
Date: Wed, 14 Apr 2021 21:01:38 -0500
Subject: [PATCH 2/2] A better fix

---
 x-pack/plugins/canvas/storybook/preview-head.html |  9 +++++++++
 x-pack/plugins/canvas/storybook/webpack.config.js |  4 +++-
 .../canvas/storybook/webpack.dll.config.js        | 15 ---------------
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/canvas/storybook/preview-head.html b/x-pack/plugins/canvas/storybook/preview-head.html
index f8a7de6ddbaf1..50a7d869218e4 100644
--- a/x-pack/plugins/canvas/storybook/preview-head.html
+++ b/x-pack/plugins/canvas/storybook/preview-head.html
@@ -4,3 +4,12 @@
 -->
 <script src="dll.js"></script>
 <link href="dll.css" rel="stylesheet" />
+
+<!-- Added for Kibana shared dependencies -->
+<script>
+  window.__kbnPublicPath__ = { 'kbn-ui-shared-deps': '.' };
+</script>
+<script src="kbn-ui-shared-deps.@elastic.js"></script>
+<script src="kbn-ui-shared-deps.js"></script>
+<link href="kbn-ui-shared-deps.css" rel="stylesheet" />
+<link href="kbn-ui-shared-deps.v7.light.css" rel="stylesheet" />
diff --git a/x-pack/plugins/canvas/storybook/webpack.config.js b/x-pack/plugins/canvas/storybook/webpack.config.js
index 5ff8523c95a5f..e8422db775c7d 100644
--- a/x-pack/plugins/canvas/storybook/webpack.config.js
+++ b/x-pack/plugins/canvas/storybook/webpack.config.js
@@ -6,6 +6,7 @@
  */
 
 const path = require('path');
+const shared = require('@kbn/ui-shared-deps');
 const webpack = require('webpack');
 const webpackMerge = require('webpack-merge');
 const { stringifyRequest } = require('loader-utils');
@@ -15,12 +16,13 @@ const { DLL_OUTPUT, KIBANA_ROOT } = require('./constants');
 // Extend the Storybook Webpack config with some customizations
 module.exports = async ({ config: storybookConfig }) => {
   const config = {
+    externals: shared.externals,
     module: {
       rules: [
         // Include the React preset from Kibana for JS(X) and TS(X)
         {
           test: /\.(j|t)sx?$/,
-          exclude: /node_modules(?!\/@kbn)/,
+          exclude: /node_modules/,
           loaders: 'babel-loader',
           options: {
             presets: [require.resolve('@kbn/babel-preset/webpack_preset')],
diff --git a/x-pack/plugins/canvas/storybook/webpack.dll.config.js b/x-pack/plugins/canvas/storybook/webpack.dll.config.js
index 3051bbebdaf0c..252cc50f8bb96 100644
--- a/x-pack/plugins/canvas/storybook/webpack.dll.config.js
+++ b/x-pack/plugins/canvas/storybook/webpack.dll.config.js
@@ -28,33 +28,18 @@ module.exports = {
     '@storybook/addon-actions/register',
     '@storybook/core',
     '@storybook/core/dist/server/common/polyfills.js',
-    '@storybook/react',
     '@storybook/theming',
     'angular-mocks',
-    'angular',
     'brace',
     'chroma-js',
     'highlight.js',
     'html-entities',
     'jsondiffpatch',
-    'jquery',
-    'lodash',
     'markdown-it',
     'monaco-editor',
-    'prop-types',
-    'react-ace',
-    'react-beautiful-dnd',
-    'react-dom',
-    'react-focus-lock',
-    'react-markdown',
-    'react-monaco-editor',
-    'react-resize-detector',
-    'react-virtualized',
-    'react',
     'recompose',
     'redux-actions',
     'remark-parse',
-    'rxjs',
     'sinon',
     'tinycolor2',
     // Include the DLL UI contexts from Kibana