title: React- Webpack: Cannot read property 'tap' of undefined
body: <p>I have a React application configured with Django Application. I have different webpack config files for development and production, When I run "npm run start", it gives me error that:</p>
  
  <blockquote>
    <p>Cannot read property 'tap' of undefined</p>
  </blockquote>
  
  <p><strong>package.json file:</strong></p>
  
  <pre><code>{
      "name": "project",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
      "@babel/core": "7.1.0",
      "@svgr/webpack": "2.4.1",
      "ajv": "^6.5.4",
      "ajv-keywords": "^3.2.0",
      "babel-core": "7.0.0-bridge.0",
      "babel-eslint": "9.0.0",
      "babel-jest": "23.6.0",
      "babel-loader": "8.0.4",
      "babel-plugin-named-asset-import": "^0.2.2",
      "babel-preset-react-app": "^5.0.4",
      "bfj": "6.1.1",
      "case-sensitive-paths-webpack-plugin": "2.1.2",
      "chalk": "2.4.1",
      "css-loader": "1.0.0",
      "dotenv": "6.0.0",
      "dotenv-expand": "4.2.0",
      "eslint": "5.6.0",
      "eslint-config-react-app": "^3.0.4",
      "eslint-loader": "2.1.1",
      "eslint-plugin-flowtype": "2.50.1",
      "eslint-plugin-import": "2.14.0",
      "eslint-plugin-jsx-a11y": "6.1.2",
      "eslint-plugin-react": "7.11.1",
      "file-loader": "2.0.0",
      "fs-extra": "7.0.0",
      "identity-obj-proxy": "3.0.0",
      "jest": "23.6.0",
      "jest-pnp-resolver": "1.0.1",
      "jest-resolve": "23.6.0",
      "mini-css-extract-plugin": "0.4.3",
      "optimize-css-assets-webpack-plugin": "5.0.1",
      "pnp-webpack-plugin": "1.1.0",
      "postcss-flexbugs-fixes": "4.1.0",
      "postcss-loader": "3.0.0",
      "postcss-preset-env": "6.0.6",
      "postcss-safe-parser": "4.0.1",
      "react": "^16.6.0",
      "react-app-polyfill": "^0.1.3",
      "react-dev-utils": "^6.0.5",
      "react-dom": "^16.6.0",
      "resolve": "1.8.1",
      "sass-loader": "7.1.0",
      "style-loader": "0.23.0",
      "terser-webpack-plugin": "1.1.0",
      "url-loader": "1.1.1",
      "webpack": "4.19.1",
      "webpack-dev-server": "3.1.9",
      "webpack-manifest-plugin": "2.0.4",
      "workbox-webpack-plugin": "3.6.2"
  },
  "scripts": {
      "start": "node scripts/start.js",
      "build": "node scripts/build.js",
      "test": "node scripts/test.js"
  },
  "eslintConfig": {
      "extends": "react-app"
  },
  "browserslist": [
      "&gt;0.2%",
      "not dead",
      "not ie &lt;= 11",
      "not op_mini all"
  ],
  "jest": {
      "collectCoverageFrom": [
          "src/**/*.{js,jsx}"
      ],
      "resolver": "jest-pnp-resolver",
      "setupFiles": [
          "react-app-polyfill/jsdom"
      ],
      "testMatch": [
          "&lt;rootDir&gt;/src/**/__tests__/**/*.{js,jsx}",
          "&lt;rootDir&gt;/src/**/?(*.)(spec|test).{js,jsx}"
      ],
      "testEnvironment": "jsdom",
      "testURL": "http://localhost",
      "transform": {
          "^.+\\.(js|jsx)$": "&lt;rootDir&gt;/node_modules/babel-jest",
          "^.+\\.css$": "&lt;rootDir&gt;/config/jest/cssTransform.js",
          "^(?!.*\\.(js|jsx|css|json)$)": "&lt;rootDir&gt;/config/jest/fileTransform.js"
      },
      "transformIgnorePatterns": [
          "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
          "^.+\\.module\\.(css|sass|scss)$"
      ],
      "moduleNameMapper": {
          "^react-native$": "react-native-web",
          "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
      },
      "moduleFileExtensions": [
          "web.js",
          "js",
          "json",
          "web.jsx",
          "jsx",
          "node"
      ]
  },
  "babel": {
      "presets": [
          "react-app"
      ]
  },
  "devDependencies": {
         "html-webpack-plugin": "^4.0.0-beta.2",
         "react-hot-loader": "^4.0.0",
         "tap": "^11.0.0-rc.3",
         "webpack-bundle-tracker": "^0.4.2-beta",
         "webpack-cli": "^3.1.2"
      }
  }
  </code></pre>
  
  <p>webpack.config.dev.js file:
      "use strict";</p>
  
  <pre><code>const path = require("path");
  const webpack = require("webpack");
  const PnpWebpackPlugin = require("pnp-webpack-plugin");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const CaseSensitivePathsPlugin = require("case-sensitive-paths- 
  webpack-plugin");
  const InterpolateHtmlPlugin = require("react-dev- 
   utils/InterpolateHtmlPlugin");
   const WatchMissingNodeModulesPlugin = require("react-dev- 
    utils/WatchMissingNodeModulesPlugin");
    const ModuleScopePlugin = require("react-dev- 
    utils/ModuleScopePlugin");
    const getCSSModuleLocalIdent = require("react-dev- 
       utils/getCSSModuleLocalIdent");
   const getClientEnvironment = require("./env");
   const paths = require("./paths");
   const ManifestPlugin = require("webpack-manifest-plugin");
   const ModuleNotFoundPlugin = require("react-dev- 
  utils/ModuleNotFoundPlugin");
  
   // Webpack uses `publicPath` to determine where the app is being 
  served from.
   // In development, we always serve from the root. This makes config 
   easier.
   //const publicPath = '/';
   // `publicUrl` is just like `publicPath`, but we will provide it to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in 
   JavaScript.
   // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than 
         %PUBLIC_PATH%xyz.
  
      const publicPath = "http://localhost:3000/";
     const publicUrl = "http://localhost:3000/";
       // Get environment variables to inject into our app.
      const env = getClientEnvironment(publicUrl);
     const BundleTracker = require("webpack-bundle-tracker");
      // style files regexes
       const cssRegex = /\.css$/;
       const cssModuleRegex = /\.module\.css$/;
      const sassRegex = /\.(scss|sass)$/;
   const sassModuleRegex = /\.module\.(scss|sass)$/;
  
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) =&gt; {
    const loaders = [
      require.resolve("style-loader"),
       {
             loader: require.resolve("css-loader"),
             options: cssOptions
        },
       {
    // Options for PostCSS as we reference these options twice
    // Adds vendor prefixing based on your specified browser support in
    // package.json
    loader: require.resolve("postcss-loader"),
    options: {
      // Necessary for external CSS imports to work
      // https://github.com/facebook/create-react-app/issues/2677
      ident: "postcss",
      plugins: () =&gt; [
        require("postcss-flexbugs-fixes"),
        require("postcss-preset-env")({
          autoprefixer: {
            flexbox: "no-2009"
          },
          stage: 3
        })
      ]
    }
     }
   ];
   if (preProcessor) {
     loaders.push(require.resolve(preProcessor));
   }
   return loaders;
  };
  
   // This is the development configuration.
   // It is focused on developer experience and fast rebuilds.
   // The production configuration is different and lives in a separate 
      file.
     module.exports = {
        mode: "development",
         // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
         // See the discussion in https://github.com/facebook/create-react-app/issues/343
       devtool: "cheap-module-source-map",
     // These are the "entry points" to our application.
      // This means they will be the "root" imports that are included in JS bundle.
      entry: [
          // Include an alternative client for WebpackDevServer. A client's job is to
        // connect to WebpackDevServer by a socket and get notified about changes.
      // When you save a file, the client will either apply hot updates (in case
       // of CSS changes), or refresh the page (in case of JS changes). When you
             // make a syntax error, this client will display a syntax error overlay.
     // Note: instead of the default WebpackDevServer client, we use a custom one
       // to bring better experience for Create React App users. You can replace
        // the line below with these two lines if you prefer the stock client:
         // require.resolve('webpack-dev-server/client') + '?/',
         // require.resolve('webpack/hot/dev-server'),
       require.resolve("react-dev-utils/webpackHotDevClient"),
       require.resolve("webpack-dev-server/client") + "? 
       http://localhost:3000",
       require.resolve("webpack/hot/dev-server"),
        // Finally, this is your app's code:
        paths.appIndexJs
          // We include the app code last so that if there is a runtime error during
  // initialization, it doesn't blow up the WebpackDevServer client, and
      // changing JS code would still trigger a refresh.
    ],
     output: {
       // Add /* filename */ comments to generated require()s in the output.
        pathinfo: true,
            // This does not produce a real file. It's just the virtual path that is
         // served by WebpackDevServer in development. This is the JS bundle
      // containing code from all our entry points, and the Webpack runtime.
         filename: "static/js/bundle.js",
  // There are also additional JS chunk files if you use code splitting.
  chunkFilename: "static/js/[name].chunk.js",
  // This is the URL that app is served from. We use "/" in development.
  publicPath: publicPath,
  // Point sourcemap entries to original disk location (format as URL on Windows)
  devtoolModuleFilenameTemplate: info =&gt;
    path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")
    },
     optimization: {
       // Automatically split vendor and commons
      // https://twitter.com/wSokra/status/969633336732905474
      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
  splitChunks: {
    chunks: "all",
    name: false
  },
  minimize: false,
  // Keep the runtime chunk seperated to enable long term caching
  // https://twitter.com/wSokra/status/969679223278505985
      runtimeChunk: true
    },
     resolve: {
  // This allows you to set a fallback for where Webpack should look for modules.
  // We placed these paths second because we want `node_modules` to "win"
  // if there are any conflicts. This matches Node resolution mechanism.
  // https://github.com/facebook/create-react-app/issues/253
  modules: ["node_modules"].concat(
    // It is guaranteed to exist because we tweak it in `env.js`
    process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
  ),
  // These are the reasonable defaults supported by the Node ecosystem.
  // We also include JSX as a common component filename extension to support
  // some tools, although we do not recommend using it, see:
  // https://github.com/facebook/create-react-app/issues/290
  // `web` extension prefixes have been added for better support
  // for React Native Web.
  extensions: [".mjs", ".web.js", ".js", ".json", ".web.jsx", ".jsx"],
  alias: {
    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    "react-native": "react-native-web"
  },
  plugins: [
    // Adds support for installing with Plug'n'Play, leading to faster installs and adding
    // guards against forgotten dependencies and such.
    PnpWebpackPlugin,
    // Prevents users from importing files from outside of src/ (or node_modules/).
    // This often causes confusion because we only process files within src/ with babel.
    // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
    // please link the files into your node_modules/ and let module-resolution kick in.
    // Make sure your source files are compiled, as they will not be processed in any way.
    new BundleTracker({
      path: paths.statsRoot,
      filename: "webpack-stats.dev.json"
    }),
    new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
  ]
   },
     resolveLoader: {
  plugins: [
    // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
    // from the current package.
    PnpWebpackPlugin.moduleLoader(module)
  ]
    },
    module: {
  strictExportPresence: true,
  rules: [
    // Disable require.ensure as it's not a standard language feature.
    { parser: { requireEnsure: false } },
  
    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    {
      test: /\.(js|mjs|jsx)$/,
      enforce: "pre",
      use: [
        {
          options: {
            formatter: require.resolve("react-dev-utils/eslintFormatter"),
            eslintPath: require.resolve("eslint")
          },
          loader: require.resolve("eslint-loader")
        }
      ],
      include: paths.appSrc
    },
    {
      // "oneOf" will traverse all following loaders until one will
      // match the requirements. When no loader matches it will fall
      // back to the "file" loader at the end of the loader list.
      oneOf: [
        // "url" loader works like "file" loader except that it embeds assets
        // smaller than specified limit in bytes as data URLs to avoid requests.
        // A missing `test` is equivalent to a match.
        {
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
          loader: require.resolve("url-loader"),
          options: {
            limit: 10000,
            name: "static/media/[name].[hash:8].[ext]"
          }
        },
        // Process application JS with Babel.
        // The preset includes JSX, Flow, and some ESnext features.
        {
          test: /\.(js|mjs|jsx)$/,
          include: paths.appSrc,
          loader: require.resolve("babel-loader"),
          options: {
            customize: require.resolve(
              "babel-preset-react-app/webpack-overrides"
            ),
  
               plugins: [
              [
                require.resolve("babel-plugin-named-asset-import"),
                {
                  loaderMap: {
                    svg: {
                      ReactComponent: "@svgr/webpack?-prettier,-svgo![path]"
                    }
                  }
                }
              ]
            ],
            // This is a feature of `babel-loader` for webpack (not Babel itself).
            // It enables caching results in ./node_modules/.cache/babel-loader/
            // directory for faster rebuilds.
            cacheDirectory: true,
            // Don't waste time on Gzipping the cache
            cacheCompression: false
          }
        },
        // Process any JS outside of the app with Babel.
        // Unlike the application JS, we only compile the standard ES features.
        {
          test: /\.(js|mjs)$/,
          exclude: /@babel(?:\/|\\{1,2})runtime/,
          loader: require.resolve("babel-loader"),
          options: {
            babelrc: false,
            configFile: false,
            compact: false,
            presets: [
              [
                require.resolve("babel-preset-react-app/dependencies"),
                { helpers: true }
              ]
            ],
            cacheDirectory: true,
            // Don't waste time on Gzipping the cache
            cacheCompression: false,
  
            // If an error happens in a package, it's possible to be
            // because it was compiled. Thus, we don't want the browser
            // debugger to show the original code. Instead, the code
            // being evaluated would be much more helpful.
            sourceMaps: false
          }
        },
        // "postcss" loader applies autoprefixer to our CSS.
        // "css" loader resolves paths in CSS and adds assets as dependencies.
        // "style" loader turns CSS into JS modules that inject &lt;style&gt; tags.
        // In production, we use a plugin to extract that CSS to a file, but
        // in development "style" loader enables hot editing of CSS.
        // By default we support CSS Modules with the extension .module.css
        {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1
          })
        },
        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
        // using the extension .module.css
        {
          test: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent
          })
        },
        // Opt-in support for SASS (using .scss or .sass extensions).
        // Chains the sass-loader with the css-loader and the style-loader
        // to immediately apply all styles to the DOM.
        // By default we support SASS Modules with the
        // extensions .module.scss or .module.sass
        {
          test: sassRegex,
          exclude: sassModuleRegex,
          use: getStyleLoaders({ importLoaders: 2 }, "sass-loader")
        },
        // Adds support for CSS Modules, but using SASS
        // using the extension .module.scss or .module.sass
        {
          test: sassModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 2,
              modules: true,
              getLocalIdent: getCSSModuleLocalIdent
            },
            "sass-loader"
          )
        },
        // "file" loader makes sure those assets get served by WebpackDevServer.
        // When you `import` an asset, you get its (virtual) filename.
        // In production, they would get copied to the `build` folder.
        // This loader doesn't use a "test" so it will catch all modules
        // that fall through the other loaders.
        {
          // Exclude `js` files to keep "css" loader working as it injects
          // its runtime that would otherwise be processed through "file" loader.
          // Also exclude `html` and `json` extensions so they get processed
          // by webpacks internal loaders.
          exclude: [/\.(js|mjs|jsx)$/, /\.html$/, /\.json$/],
          loader: require.resolve("file-loader"),
          options: {
            name: "static/media/[name].[hash:8].[ext]"
          }
        }
      ]
    }
    // ** STOP ** Are you adding a new loader?
    // Make sure to add the new loader(s) before the "file" loader.
  ]
   },
     plugins: [
  // Generates an `index.html` file with the &lt;script&gt; injected.
  new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml
  }),
  
  // new InterpolateHtmlPlugin({
  //   name: "xu"
  // }),
  // Makes some environment variables available in index.html.
  // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
  // &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
  // In development, this will be an empty string.
  new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
  // This gives some necessary context to module not found errors, such as
  // the requesting resource.
  new ModuleNotFoundPlugin(paths.appPath),
  // Makes some environment variables available to the JS code, for example:
  // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
  new webpack.DefinePlugin(env.stringified),
  // This is necessary to emit hot updates (currently CSS only):
  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/facebook/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/facebook/create-react-app/issues/186
  new WatchMissingNodeModulesPlugin(paths.appNodeModules),
  // Moment.js is an extremely popular library that bundles large locale files
  // by default due to how Webpack interprets its code. This is a practical
  // solution that requires the user to opt into importing specific locales.
  // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
  // You can remove this if you don't use Moment.js:
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  // 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
  })
   ],
  
    // Some libraries import Node modules but don't use them in the browser.
    // Tell Webpack to provide empty mocks for them so importing them works.
    node: {
  dgram: "empty",
  fs: "empty",
  net: "empty",
  tls: "empty",
  child_process: "empty"
   },
       // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
   performance: false
  };
  </code></pre>
  
  <p>start.js file:
         "use strict";</p>
  
  <pre><code>      // Do this as the first thing so that any code reading it knows the right env.
     process.env.BABEL_ENV = "development";
     process.env.NODE_ENV = "development";
  
    // Makes the script crash on unhandled rejections instead of silently
     // ignoring them. In the future, promise rejections that are not handled will
    // terminate the Node.js process with a non-zero exit code.
     process.on("unhandledRejection", err =&gt; {
        throw err;
     });
  
     // Ensure environment variables are read.
    require("../config/env");
  
     const fs = require("fs");
    const chalk = require("chalk");
    const webpack = require("webpack");
  const WebpackDevServer = require("webpack-dev-server");
  const clearConsole = require("react-dev-utils/clearConsole");
  const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
  const {
    choosePort,
    createCompiler,
   prepareProxy,
   prepareUrls
  } = require("react-dev-utils/WebpackDevServerUtils");
   const openBrowser = require("react-dev-utils/openBrowser");
   const paths = require("../config/paths");
   const config = require("../config/webpack.config.dev");
   const createDevServerConfig = 
   require("../config/webpackDevServer.config");
  
   const useYarn = fs.existsSync(paths.yarnLockFile);
   const isInteractive = process.stdout.isTTY;
  
   // Warn and crash if required files are missing
   if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
          process.exit(1);
    }
  
   // Tools like Cloud9 rely on this.
        const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
    const HOST = process.env.HOST || "0.0.0.0";
  
   if (process.env.HOST) {
      console.log(
       chalk.cyan(
    `   Attempting to bind to HOST environment variable: ${chalk.yellow(
      chalk.bold(process.env.HOST)
    )}`
    )
   );
     console.log(
     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
    );
        console.log(
       `Learn more here:`
     );
   console.log();
  }
  
           // We require that you explictly set browsers and do not fall 
      back to
    // browserslist defaults.
      const { checkBrowsers } = require("react-dev-utils/browsersHelper");
        checkBrowsers(paths.appPath, isInteractive)
       .then(() =&gt; {
             // We attempt to use the default port but if it is busy, we offer the user to
           // run on a different port. `choosePort()` Promise resolves to the next free port.
          return choosePort(HOST, DEFAULT_PORT);
        })
         .then(port =&gt; {
         if (port == null) {
            // We have not found a port.
           return;
           }
      const protocol = process.env.HTTPS === "true" ? "https" : "http";
  const appName = require(paths.appPackageJson).name;
  const urls = prepareUrls(protocol, HOST, port);
  // Create a webpack compiler that is configured with custom messages.
  const compiler = createCompiler(webpack, config, appName, urls, useYarn);
  // Load proxy config
  const proxySetting = require(paths.appPackageJson).proxy;
  const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
  // Serve webpack assets generated by the compiler over a web server.
  const serverConfig = createDevServerConfig(
    proxyConfig,
    urls.lanUrlForConfig
  );
  const devServer = new WebpackDevServer(compiler, serverConfig);
  // Launch WebpackDevServer.
  devServer.listen(port, HOST, err =&gt; {
    if (err) {
      return console.log(err);
    }
    if (isInteractive) {
      clearConsole();
    }
    console.log(chalk.cyan("Starting the development server...\n"));
    openBrowser(urls.localUrlForBrowser);
  });
  
  ["SIGINT", "SIGTERM"].forEach(function(sig) {
    process.on(sig, function() {
      devServer.close();
      process.exit();
    });
  });
   })
   .catch(err =&gt; {
     if (err &amp;&amp; err.message) {
       console.log(err.message);
     }
     process.exit(1);
   });
  </code></pre>
  
  <p>Error Stacktrace:</p>
  
  <pre><code>&gt; project@0.1.0 start /usr/react_projects/project
  &gt; node scripts/start.js
  
   Cannot read property 'tap' of undefined
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! project@0.1.0 start: `node scripts/start.js`
  npm ERR! Exit status 1
  npm ERR! 
  npm ERR! Failed at the project@0.1.0 start script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  </code></pre>
  
  <p>I don't understand why it is giving Cannot find property "tap" undefined.  </p>