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

@@ -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}

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() {

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');

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"
   ]
 }

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',
+              },
             },
           },
         ],