Replace ts-loader with Babel (#21587)

* Applied prettier to relevant webpack configs

* Replaced ng-annotate with babel-plugin-angularjs-annotate

… and replaced ts-loader with @preset/typescript

* Removed redundant import

… that is problematic with Babel's module resolver

* Updated lockfile

* Traspile debug package to es5 for PhantomJS support

* Update babel to latest version

* Remove @babel/poolyfill and url search params polyfill

* Add ts-loader to grafana-ui dependencies

* Update prod webpack build to use cor-js 3

* Applied prettier to relevant webpack configs

* Replaced ng-annotate with babel-plugin-angularjs-annotate

… and replaced ts-loader with @preset/typescript

* Updated lockfile

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

scripts/webpack/IgnoreNotFoundExportPlugin.js

@@ -1,22 +0,0 @@
-// https://github.com/TypeStrong/ts-loader/issues/653#issuecomment-390889335
-
-const ModuleDependencyWarning = require("webpack/lib/ModuleDependencyWarning")
-
-module.exports = class IgnoreNotFoundExportPlugin {
-    apply(compiler) {
-        const messageRegExp = /export '.*'( \(reexported as '.*'\))? was not found in/
-        function doneHook(stats) {
-            stats.compilation.warnings = stats.compilation.warnings.filter(function(warn) {
-                if (warn instanceof ModuleDependencyWarning && messageRegExp.test(warn.message)) {
-                    return false
-                }
-                return true;
-            })
-        }
-        if (compiler.hooks) {
-            compiler.hooks.done.tap("IgnoreNotFoundExportPlugin", doneHook)
-        } else {
-            compiler.plugin("done", doneHook)
-        }
-    }
-}

scripts/webpack/webpack.common.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 // https://github.com/visionmedia/debug/issues/701#issuecomment-505487361
 function shouldExclude(filename) {
-  const packagesToProcessbyBabel = ['debug', 'lru-cache', 'yallist', 'apache-arrow', 'react-hook-form'];
+  const packagesToProcessbyBabel = ['debug', 'lru-cache', 'yallist', 'apache-arrow', 'react-hook-form', 'rc-trigger'];
   for (const package of packagesToProcessbyBabel) {
     if (filename.indexOf(`node_modules/${package}`) > 0) {
       return false;
@@ -11,6 +11,7 @@ function shouldExclude(filename) {
   return true;
 }
 
+console.log(path.resolve());
 module.exports = {
   target: 'web',
   entry: {
@@ -24,7 +25,11 @@ module.exports = {
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.es6', '.js', '.json', '.svg'],
-    alias: {},
+    alias: {
+      // rc-trigger uses babel-runtime which has internal dependency to core-js@2
+      // this alias maps that dependency to core-js@t3
+      'core-js/library/fn': 'core-js/stable',
+    },
     modules: [path.resolve('public'), path.resolve('node_modules')],
   },
   stats: {

scripts/webpack/webpack.dev.js

@@ -27,73 +27,100 @@ module.exports = (env = {}) =>
     },
 
     module: {
-      rules: [{
-          test: /\.tsx?$/,
-          enforce: 'pre',
-          exclude: /node_modules/,
-          use: {
-            loader: 'tslint-loader',
-            options: {
-              emitErrors: true,
-              typeCheck: false,
-            }
-          }
-        },
+      // Note: order is bottom-to-top and/or right-to-left
+      rules: [
         {
           test: /\.tsx?$/,
           exclude: /node_modules/,
-          use: {
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: true
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                cacheDirectory: true,
+                babelrc: false,
+                // Note: order is top-to-bottom and/or left-to-right
+                plugins: [
+                  [
+                    require('@rtsao/plugin-proposal-class-properties'),
+                    {
+                      loose: true,
+                    },
+                  ],
+                  '@babel/plugin-proposal-nullish-coalescing-operator',
+                  '@babel/plugin-proposal-optional-chaining',
+                  'angularjs-annotate',
+                ],
+                // Note: order is bottom-to-top and/or right-to-left
+                presets: [
+                  [
+                    '@babel/preset-env',
+                    {
+                      targets: {
+                        browsers: 'last 3 versions',
+                      },
+                      useBuiltIns: 'entry',
+                      corejs: 3,
+                      modules: false,
+                    },
+                  ],
+                  '@babel/preset-typescript',
+                  '@babel/preset-react',
+                ],
+              },
             },
-          },
+            {
+              loader: 'tslint-loader',
+              options: {
+                emitErrors: true,
+                typeCheck: false,
+              },
+            },
+          ],
         },
         require('./sass.rule.js')({
           sourceMap: false,
-          preserveUrl: false
+          preserveUrl: false,
         }),
         {
           test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-          loader: 'file-loader'
+          loader: 'file-loader',
         },
-      ]
+      ],
     },
 
     plugins: [
       new CleanWebpackPlugin(),
-      env.noTsCheck ?
-      new webpack.DefinePlugin({}) // bogus plugin to satisfy webpack API
-      :
-      new ForkTsCheckerWebpackPlugin({
-        checkSyntacticErrors: true,
-      }),
+      env.noTsCheck
+        ? new webpack.DefinePlugin({}) // bogus plugin to satisfy webpack API
+        : new ForkTsCheckerWebpackPlugin({
+            checkSyntacticErrors: true,
+          }),
       new MiniCssExtractPlugin({
-        filename: 'grafana.[name].[hash].css'
+        filename: 'grafana.[name].[hash].css',
       }),
       new HtmlWebpackPlugin({
         filename: path.resolve(__dirname, '../../public/views/error.html'),
         template: path.resolve(__dirname, '../../public/views/error-template.html'),
         inject: false,
         chunksSortMode: 'none',
-        excludeChunks: ['dark', 'light']
+        excludeChunks: ['dark', 'light'],
       }),
       new HtmlWebpackPlugin({
         filename: path.resolve(__dirname, '../../public/views/index.html'),
         template: path.resolve(__dirname, '../../public/views/index-template.html'),
         inject: false,
         chunksSortMode: 'none',
-        excludeChunks: ['dark', 'light']
+        excludeChunks: ['dark', 'light'],
       }),
       new webpack.NamedModulesPlugin(),
       new webpack.HotModuleReplacementPlugin(),
       new webpack.DefinePlugin({
         'process.env': {
-          NODE_ENV: JSON.stringify('development')
-        }
+          NODE_ENV: JSON.stringify('development'),
+        },
       }),
       // new BundleAnalyzerPlugin({
       //   analyzerPort: 8889
       // })
-    ]
+    ],
   });

scripts/webpack/webpack.hot.js

@@ -7,7 +7,6 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
-const IgnoreNotFoundExportPlugin = require("./IgnoreNotFoundExportPlugin.js");
 
 module.exports = merge(common, {
   mode: 'development',
@@ -36,50 +35,61 @@ module.exports = merge(common, {
       '!/public/build': 'http://localhost:3000',
     },
     watchOptions: {
-      ignored: /node_modules/
-    }
+      ignored: /node_modules/,
+    },
   },
 
   optimization: {
     removeAvailableModules: false,
     runtimeChunk: false,
     removeEmptyChunks: false,
-    splitChunks: false
+    splitChunks: false,
   },
 
   module: {
-    rules: [{
+    // Note: order is bottom-to-top and/or right-to-left
+    rules: [
+      {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: [{
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
-            babelrc: false,
-            plugins: [
-              [require('@rtsao/plugin-proposal-class-properties'), {
-                loose: true
-              }],
-              'angularjs-annotate',
-              '@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
-              'react-hot-loader/babel',
-            ],
-            presets: [
-              [
-                '@babel/preset-env',
-                {
-                  targets: {
-                    browsers: 'last 3 versions'
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+              babelrc: false,
+              // Note: order is top-to-bottom and/or left-to-right
+              plugins: [
+                [
+                  require('@rtsao/plugin-proposal-class-properties'),
+                  {
+                    loose: true,
                   },
-                  useBuiltIns: 'entry',
-                  modules: false
-                },
+                ],
+                '@babel/plugin-proposal-nullish-coalescing-operator',
+                '@babel/plugin-proposal-optional-chaining',
+                '@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
+                'angularjs-annotate',
+                'react-hot-loader/babel',
               ],
-              '@babel/preset-typescript',
-              '@babel/preset-react',
-            ],
+              // Note: order is bottom-to-top and/or right-to-left
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    targets: {
+                      browsers: 'last 3 versions',
+                    },
+                    useBuiltIns: 'entry',
+                    modules: false,
+                  },
+                ],
+                '@babel/preset-typescript',
+                '@babel/preset-react',
+              ],
+            },
           },
-        }, ],
+        ],
       },
       {
         test: /\.scss$/,
@@ -90,13 +100,13 @@ module.exports = merge(common, {
             loader: 'postcss-loader',
             options: {
               config: {
-                path: __dirname + '/postcss.config.js'
+                path: __dirname + '/postcss.config.js',
               },
             },
           },
           {
-            loader: 'sass-loader'
-          }
+            loader: 'sass-loader',
+          },
         ],
       },
       {
@@ -113,7 +123,7 @@ module.exports = merge(common, {
       template: path.resolve(__dirname, '../../public/views/index-template.html'),
       inject: 'body',
       alwaysWriteToDisk: true,
-      chunksSortMode: 'none'
+      chunksSortMode: 'none',
     }),
     new HtmlWebpackHarddiskPlugin(),
     new webpack.NamedModulesPlugin(),
@@ -124,6 +134,5 @@ module.exports = merge(common, {
         NODE_ENV: JSON.stringify('development'),
       },
     }),
-    new IgnoreNotFoundExportPlugin(),
   ],
 });

scripts/webpack/webpack.prod.js

@@ -4,15 +4,14 @@ const merge = require('webpack-merge');
 const TerserPlugin = require('terser-webpack-plugin');
 const common = require('./webpack.common.js');
 const path = require('path');
-const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports = merge(common, {
   mode: 'production',
-  devtool: "source-map",
+  devtool: 'source-map',
 
   entry: {
     dark: './public/sass/grafana.dark.scss',
@@ -20,33 +19,62 @@ module.exports = merge(common, {
   },
 
   module: {
-    rules: [{
-        test: /\.tsx?$/,
-        enforce: 'pre',
-        exclude: /node_modules/,
-        use: {
-          loader: 'tslint-loader',
-          options: {
-            emitErrors: true,
-            typeCheck: false,
-          }
-        }
-      },
+    // Note: order is bottom-to-top and/or right-to-left
+    rules: [
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: {
-          loader: 'ts-loader',
-          options: {
-            transpileOnly: true
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+              babelrc: false,
+              // Note: order is top-to-bottom and/or left-to-right
+              plugins: [
+                [
+                  require('@rtsao/plugin-proposal-class-properties'),
+                  {
+                    loose: true,
+                  },
+                ],
+                '@babel/plugin-proposal-nullish-coalescing-operator',
+                '@babel/plugin-proposal-optional-chaining',
+                '@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
+                'angularjs-annotate',
+              ],
+              // Note: order is bottom-to-top and/or right-to-left
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    targets: {
+                      browsers: 'last 3 versions',
+                    },
+                    useBuiltIns: 'entry',
+                    corejs: 3,
+                    modules: false,
+                  },
+                ],
+                '@babel/preset-typescript',
+                '@babel/preset-react',
+              ],
+            },
           },
-        },
+          {
+            loader: 'tslint-loader',
+            options: {
+              emitErrors: true,
+              typeCheck: false,
+            },
+          },
+        ],
       },
       require('./sass.rule.js')({
         sourceMap: false,
-        preserveUrl: false
-      })
-    ]
+        preserveUrl: false,
+      }),
+    ],
   },
   optimization: {
     nodeEnv: 'production',
@@ -54,40 +82,39 @@ module.exports = merge(common, {
       new TerserPlugin({
         cache: false,
         parallel: true,
-        sourceMap: true
+        sourceMap: true,
       }),
-      new OptimizeCSSAssetsPlugin({})
-    ]
+      new OptimizeCSSAssetsPlugin({}),
+    ],
   },
   plugins: [
     new ForkTsCheckerWebpackPlugin({
       checkSyntacticErrors: true,
     }),
     new MiniCssExtractPlugin({
-      filename: "grafana.[name].[hash].css"
+      filename: 'grafana.[name].[hash].css',
     }),
-    new ngAnnotatePlugin(),
     new HtmlWebpackPlugin({
       filename: path.resolve(__dirname, '../../public/views/error.html'),
       template: path.resolve(__dirname, '../../public/views/error-template.html'),
       inject: false,
       excludeChunks: ['dark', 'light'],
-      chunksSortMode: 'none'
+      chunksSortMode: 'none',
     }),
     new HtmlWebpackPlugin({
       filename: path.resolve(__dirname, '../../public/views/index.html'),
       template: path.resolve(__dirname, '../../public/views/index-template.html'),
       inject: false,
       excludeChunks: ['manifest', 'dark', 'light'],
-      chunksSortMode: 'none'
+      chunksSortMode: 'none',
     }),
-    function () {
-      this.hooks.done.tap('Done', function (stats) {
+    function() {
+      this.hooks.done.tap('Done', function(stats) {
         if (stats.compilation.errors && stats.compilation.errors.length) {
           console.log(stats.compilation.errors);
           process.exit(1);
         }
       });
-    }
-  ]
+    },
+  ],
 });