From 3d8a2b859e567224e412f2e5e8dbb5fa83ba1d97 Mon Sep 17 00:00:00 2001
From: Jianchao Yang <jesse.yang@airbnb.com>
Date: Mon, 30 Mar 2020 09:31:46 -0700
Subject: [PATCH] Build: fix hot reload for charts (#9400)

* Fix hot reload for charts

* Override tsc options for plugins

Plugins will sometimes have their own `tsconfig.json`, which will
interfere with the dev server config if configured inappropriately.

This change makes sure `tsc` (and `ts-loader`) always compiles to
`esnext` modules, so we don't get "Uncaught ReferenceError: exports
is not defined" error.
---
 superset-frontend/src/chart/ChartRenderer.jsx            | 6 +++++-
 .../src/dashboard/components/gridComponents/Chart.jsx    | 3 ++-
 superset-frontend/src/preamble.js                        | 5 +++++
 superset-frontend/tsconfig.json                          | 2 ++
 superset-frontend/webpack.config.js                      | 9 +++++++++
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/chart/ChartRenderer.jsx b/superset-frontend/src/chart/ChartRenderer.jsx
index 2adfd33a8..a5cb33255 100644
--- a/superset-frontend/src/chart/ChartRenderer.jsx
+++ b/superset-frontend/src/chart/ChartRenderer.jsx
@@ -94,7 +94,8 @@ class ChartRenderer extends React.Component {
         nextProps.height !== this.props.height ||
         nextProps.width !== this.props.width ||
         nextProps.triggerRender ||
-        nextProps.formData.color_scheme !== this.props.formData.color_scheme
+        nextProps.formData.color_scheme !== this.props.formData.color_scheme ||
+        nextProps.cacheBusterProp !== this.props.cacheBusterProp
       ) {
         return true;
       }
@@ -198,6 +199,9 @@ class ChartRenderer extends React.Component {
     return (
       <SuperChart
         disableErrorBoundary
+        key={`${chartId}${
+          process.env.WEBPACK_MODE === 'development' ? `-${Date.now()}` : ''
+        }`}
         id={`chart-id-${chartId}`}
         className={chartClassName}
         chartType={vizType}
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
index b3995284b..41c15f567 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Chart.jsx
@@ -133,7 +133,8 @@ class Chart extends React.Component {
       }
     }
 
-    return false;
+    // `cacheBusterProp` is nnjected by react-hot-loader
+    return this.props.cacheBusterProp !== nextProps.cacheBusterProp;
   }
 
   componentWillUnmount() {
diff --git a/superset-frontend/src/preamble.js b/superset-frontend/src/preamble.js
index b88ceaadf..69324f45f 100644
--- a/superset-frontend/src/preamble.js
+++ b/superset-frontend/src/preamble.js
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { setConfig as setHotLoaderConfig } from 'react-hot-loader';
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
 import moment from 'moment';
 import { configure } from '@superset-ui/translation';
@@ -23,6 +24,10 @@ import setupClient from './setup/setupClient';
 import setupColors from './setup/setupColors';
 import setupFormatters from './setup/setupFormatters';
 
+if (process.env.WEBPACK_MODE === 'development') {
+  setHotLoaderConfig({ logLevel: 'debug', trackTailUpdates: false });
+}
+
 // Configure translation
 if (typeof window !== 'undefined') {
   const root = document.getElementById('app');
diff --git a/superset-frontend/tsconfig.json b/superset-frontend/tsconfig.json
index 1ca3ffaec..3f4dce97a 100644
--- a/superset-frontend/tsconfig.json
+++ b/superset-frontend/tsconfig.json
@@ -25,8 +25,10 @@
   "include": [
     "./src/**/*",
     "./spec/**/*",
+    // include the source code of each plugin
     "./node_modules/*superset-ui*/**/src/**/*",
     "./node_modules/*superset-ui*/**/types/**/*",
+    // and the type defs of their dependencies
     "./node_modules/*superset-ui*/**/node_modules/**/*.d.ts"
   ]
 }
diff --git a/superset-frontend/webpack.config.js b/superset-frontend/webpack.config.js
index ba4860cf8..a07181cf2 100644
--- a/superset-frontend/webpack.config.js
+++ b/superset-frontend/webpack.config.js
@@ -224,6 +224,15 @@ const config = {
               // type checking is done via fork-ts-checker-webpack-plugin
               happyPackMode: true,
               transpileOnly: true,
+              // must override compiler options here, even though we have set
+              // the same options in `tsconfig.json`, because they may still
+              // be overriden by `tsconfig.json` in node_modules subdirectories.
+              compilerOptions: {
+                esModuleInterop: false,
+                importHelpers: false,
+                module: 'esnext',
+                target: 'esnext',
+              },
             },
           },
         ],