How to use the react-dev-utils/WatchMissingNodeModulesPlugin function in react-dev-utils

const frameworkConfig = framework === 'NEXT'
    ? nextConfig(paths, useBabelrc, dev)
    : createReactAppConfig(paths, useBabelrc, dev);

  const devPlugins = dev
   ? [
     new webpack.HotModuleReplacementPlugin(),
     // Watcher doesn't work well if you mistype casing in a path so we use
     // a plugin that prints an error when you attempt to do this.
     // See https://github.com/facebookincubator/create-react-app/issues/240
     // new CaseSensitivePathsPlugin(),
     // If you require a missing module and then `npm install` it, you still have
     // to restart the development server for Webpack to discover it. This plugin
     // makes the discovery automatic so you don't have to restart.
     // See https://github.com/facebookincubator/create-react-app/issues/186
     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
     new FriendlyErrorsWebpackPlugin({
       compilationSuccessInfo: {
         messages: url ? [`Catalog is running at ${link(url)}`] : []
       }
     })
   ] : [];

  return {
    devtool: dev ? 'cheap-module-source-map' : 'source-map',
    bail: dev ? false : true,
    entry: {
      catalog: (
          dev
          ? [require.resolve('react-dev-utils/webpackHotDevClient')]
          : []
        ).concat(

if (!Array.isArray(value)) {
    throw new Error('Entry value must be an array');
  }
  value.unshift(
    // `webpack-dev-server/client?${devServerPublicPath}`,
    // 'webpack/hot/dev-server',    // reload if HMR fails
    require.resolve('./../scripts/webpackHotDevClient'),  // todo !!
    // app entry point is not required here because it is carried across
    // from webpack.config, hence "unshift".
  );
}

// same as: --hot
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
webpackConfig.plugins.push(new CaseSensitivePathsPlugin());
webpackConfig.plugins.push(new WatchMissingNodeModulesPlugin(CONFIG.DIR_NPM));
webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({
  name: 'editor-vendor',
  chunks: ["editor"],
  minChunks(module, count) {
    var context = module.context;
    return context && [
      'node_modules/react',
      'node_modules/react-dom',
      'node_modules/react-redux',
      'node_modules/redux',
      'node_modules/redux-jsonschema-form',
      'node_modules/jsonschema',
      'node_modules/react-router',
      'node_modules/history',
      'node_modules/validator',
      'node_modules/lodash'

new ExpoDefinePlugin({
        mode,
        publicUrl,
        config,
        productionManifestPath: locations.production.manifest,
      }),

      // This is necessary to emit hot updates (currently CSS only):
      isDev && new HotModuleReplacementPlugin(),

      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebook/create-react-app/issues/186
      isDev && new WatchMissingNodeModulesPlugin(locations.modules),

      isProd &&
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
        }),

      // Generate a manifest file which contains a mapping of all asset filenames
      // to their corresponding output file so that tools can pick it up without
      // having to parse `index.html`.
      new ManifestPlugin({
        fileName: 'asset-manifest.json',
        publicPath,
      }),

} catch (e) {
				throw new WpackioError(
					'please install fork-ts-checker-webpack-plugin package'
				);
			}
		}
		// Add development specific plugins
		if (this.isDev) {
			// Hot Module Replacement
			plugins.push(new webpack.HotModuleReplacementPlugin());
			// If you require a missing module and then `npm install` it, you still have
			// to restart the development server for Webpack to discover it. This plugin
			// makes the discovery automatic so you don't have to restart.
			// See https://github.com/facebook/create-react-app/issues/186
			plugins.push(
				new WatchMissingNodeModulesPlugin(
					path.resolve(this.cwd, './node_modules')
				)
			);
			// Add timewatch plugin to avoid multiple successive build
			// https://github.com/webpack/watchpack/issues/25
			plugins = [new TimeFixPlugin(), ...plugins];
		} else {
			// Add Production specific plugins
			const { bannerConfig } = this.config;
			const creditNote =
				'\n\nCompiled with the help of https://wpack.io\nA zero setup Webpack Bundler Script for WordPress';
			plugins.push(
				// Banner plugin
				new webpack.BannerPlugin({
					entryOnly: false,
					raw: false,

}),
      // Pre-compress all the assets as they will be served as is.
      new CompressionPlugin({})
    ),
    ...ifWatch(
      // Add module names to factory functions so they appear in browser profiler.
      new webpack.NamedModulesPlugin(),
      // Watcher doesn't work well if you mistype casing in a path so we use
      // a plugin that prints an error when you attempt to do this.
      // See https://github.com/facebookincubator/create-react-app/issues/240
      new CaseSensitivePathsPlugin(),
      // If you require a missing module and then `npm install` it, you still have
      // to restart the development server for Webpack to discover it. This plugin
      // makes the discovery automatic so you don't have to restart.
      // See https://github.com/facebookincubator/create-react-app/issues/186
      new WatchMissingNodeModulesPlugin(paths.appNodeModules)
    ),
  ];

  const devtool = disableSourcemaps
    ? false
    : isProduction
    ? // We generate sourcemaps in production. This is slow but gives good results.
      // You can exclude the *.map files from the build during deployment.
      "source-map"
    : // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
      // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
      "cheap-module-source-map";

  const baseConfig: Configuration = {
    stats: {
      // https://github.com/TypeStrong/ts-loader#transpileonly-boolean-defaultfalse

useShortDoctype: true,
              removeEmptyAttributes: true,
              removeStyleLinkTypeAttributes: true,
              keepClosingSlash: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
            },
          }),
        }),
      // TODO: impl
      // new webpack.DefinePlugin(env.stringified),
      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
      isEnvDevelopment && new CaseSensitivePathsPlugin(),
      isEnvDevelopment &&
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
      isEnvProduction &&
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: `${assetsFolder}/css/[name].[contenthash:8].css`,
          chunkFilename: `${assetsFolder}/css/[name].[contenthash:8].chunk.css`,
        }),
      // Generate a manifest file which contains a mapping of all asset filenames
      // to their corresponding output file so that tools can pick it up without
      // having to parse `index.html`.
      new ManifestPlugin({
        fileName: 'asset-manifest.json',
        publicPath: publicPath,
        generate: (seed, files) => {
          const manifestFiles = files.reduce(function(manifest, file) {
            manifest[file.name] = file.path

useBabelrc
}: LoadWebpackOptions): Promise => {
  const env = getClientEnvironment(paths.publicUrl.replace(/\/$/, ""));

  const devPlugins = dev
    ? [
        new webpack.HotModuleReplacementPlugin(),
        // Watcher doesn't work well if you mistype casing in a path so we use
        // a plugin that prints an error when you attempt to do this.
        // See https://github.com/facebookincubator/create-react-app/issues/240
        // new CaseSensitivePathsPlugin(),
        // If you require a missing module and then `npm install` it, you still have
        // to restart the development server for Webpack to discover it. This plugin
        // makes the discovery automatic so you don't have to restart.
        // See https://github.com/facebookincubator/create-react-app/issues/186
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
        new FriendlyErrorsWebpackPlugin({
          compilationSuccessInfo: {
            messages: url ? [`Catalog is running at ${link(url)}`] : []
          }
        })
      ]
    : [];

  return {
    mode: dev ? "development" : "production",
    devtool: dev ? "cheap-module-source-map" : "source-map",
    bail: dev ? false : true,
    entry: {
      catalog: [require.resolve("react-app-polyfill/ie11")]
        .concat(
          dev ? [require.resolve("react-dev-utils/webpackHotDevClient")] : []

// define variables client side and server side
    new webpack.DefinePlugin({
      ...envVariables,
      'process.env.IS_SERVER': JSON.stringify(isServer),
      'process.env.IS_CLIENT': JSON.stringify(!isServer),
    }),

    // hot module replacement, only client side and dev
    isDev && !isServer ? new webpack.HotModuleReplacementPlugin() : null,

    // case sensitive paths plugin, only dev, both sides
    isDev ? new CaseSensitivePathsPlugin() : null,

    // watch missing node modules plugin, only dev, both sides
    isDev ? new WatchMissingNodeModulesPlugin() : null,

    // make everything that is pointed from 2 and more places a chunk
    !isDev && !isServer
      ? new webpack.optimize.CommonsChunkPlugin({
          async: true,
          children: true,
          minChunks: (module, count) => count >= 2,
        })
      : null,

    // uglify js, only client side and prod mode
    !isDev && !isServer && !useBabili
      ? new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false,
            comparisons: false,

version,
        },
        template: require.resolve('../index.html.ejs'),
      }),
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
        template: require.resolve('../iframe.html.ejs'),
      }),
      new webpack.DefinePlugin(loadEnv()),
      new webpack.HotModuleReplacementPlugin(),
      new CaseSensitivePathsPlugin(),
      new WatchMissingNodeModulesPlugin(nodeModulesPaths),
      quiet ? null : new webpack.ProgressPlugin(),
      new Dotenv({ silent: true }),
    ].filter(Boolean),
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: require.resolve('babel-loader'),
          query: babelLoaderConfig,
          include: includePaths,
          exclude: excludePaths,
        },
        {
          test: /\.md$/,
          use: [
            {

compilation,
          files,
          options,
          version: packageJson.version,
          headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
          dlls: [],
          bodyHtmlSnippet: getPreviewBodyHtml(),
        }),
        template: require.resolve(`../templates/index.ejs`),
      }),
      new DefinePlugin({
        'process.env': stringified,
        process: JSON.stringify(true),
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      }),
      isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths),
      isProd ? null : new HotModuleReplacementPlugin(),
      new CaseSensitivePathsPlugin(),
      quiet ? null : new ProgressPlugin(),
      new Dotenv({ silent: true }),
    ].filter(Boolean),
    module: {
      rules: [
        babelLoader(babelOptions),
        {
          test: /\.md$/,
          use: [
            {
              loader: require.resolve('raw-loader'),
            },
          ],
        },