text: /**
   * @see https://github.com/NativeScript/NativeScript/tree/feat/ns7-finishing-touches/packages/webpack/templates
   * @see https://github.com/NativeScript/NativeScript/pull/8801/files
   */
  const webpackConfig = require("./webpack.typescript");
  const webpack = require("webpack");
  const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
  
  module.exports = (env) => {
      env = env || {};
      const hmr = env.hmr;
      const production = env.production;
      const isAnySourceMapEnabled = !!env.sourceMap || !!env.hiddenSourceMap;
  
      const baseConfig = webpackConfig(env);
  
      /** Find the rule for transpiling ts files ("ts-loader"), and modify it to test for .tsx files too. */
      const tsxRule = baseConfig.module.rules.find(rule => rule.use && rule.use.loader === "ts-loader");
      tsxRule.test = /\.(ts|tsx)$/;
      tsxRule.use = [
          /**
           * Add React Refresh HMR support.
           * @see https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/55028c6355b31e697e21bf3e9a48613a7b94bee7/examples/typescript-without-babel/webpack.config.js#L18-L21
           */
          hmr && !production && {
              loader: "babel-loader",
              options: {
                  sourceMaps: isAnySourceMapEnabled ? "inline" : false,
                  babelrc: false,
                  plugins: ['react-refresh/babel']
              }
          },
          tsxRule.use,
      ].filter(Boolean);
  
      /**
       * Modify "nativescript-dev-webpack/hmr/hot-loader" to test for .tsx files
       * (and also js files, which it should have been doing to begin with!)
       */
      const nativeScriptDevWebpackHotLoader = baseConfig.module.rules.find(rule =>
          rule.use === "@nativescript/webpack/hmr/hot-loader"
      );
      nativeScriptDevWebpackHotLoader.test = /\.(ts|tsx|js|css|scss|html|xml)$/;
  
      /** We don't officially support JSX. Makes the webpack config rather more complicated to set up. */
      baseConfig.resolve.extensions = [".tsx", ...baseConfig.resolve.extensions];
      baseConfig.resolve.alias["react-dom"] = "react-nativescript";
  
      /** Augment NativeScript's existing DefinePlugin definitions with a few more of our own. */
      const existingDefinePlugin = baseConfig.plugins.find(plugin =>
          plugin && plugin.constructor && plugin.constructor.name === "DefinePlugin"
      );
      baseConfig.plugins.splice(
          baseConfig.plugins.indexOf(existingDefinePlugin),
          1,
          new webpack.DefinePlugin({
              ...existingDefinePlugin.definitions,
              /** For various libraries in the React ecosystem. */
              "__DEV__": production ? "false" : "true",
              "__TEST__": "false",
              /**
               * Primarily for React Fast Refresh plugin, but technically the allowHmrInProduction option could be used instead.
               * Worth including anyway, as there are plenty of Node libraries that use this flag.
               */
              "process.env.NODE_ENV": JSON.stringify(production ? "production" : "development"),
          }),
      );
  
      if(hmr && !production){
          console.warn(
              `[webpack.config.js] Warning: You have enabled HMR. However, as of the NativeScript 7 template updates, it ` + 
              `is broken, due to an issue in CopyWebpackPlugin. Please follow the instructions in this issue thread to roll ` +
              `back CopyWebpackPlugin to v4.6.0 and restore HMR: https://github.com/shirakaba/react-nativescript/issues/65\n` +
              `... After that, feel free to delete this warning from webpack.config.js!`
          );
          baseConfig.plugins.push(new ReactRefreshWebpackPlugin({
              /**
               * Maybe one day we'll implement an Error Overlay, but the work involved is too daunting for now.
               * @see https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/79#issuecomment-644324557
               */
              overlay: false,
              /**
               * If you (temporarily) want to enable HMR on a production build:
               *   1) Set `forceEnable` to `true` 
               *   2) Remove the `!production` condition on `tsxRule` to ensure that babel-loader gets used.
               */
              forceEnable: false,
          }));
      } else {
          baseConfig.plugins = baseConfig.plugins.filter(p => !(p && p.constructor && p.constructor.name === "HotModuleReplacementPlugin"));
      }
  
      return baseConfig;
  };