Webpack Runtime Require

Exposes a way to require module exports at runtime. (eg. in browser consoles)

Supports Webpack versions 1, 2, 3?, 4, and 5.

Install

npm install --save webpack-runtime-require

Usage

• 1) Tweak your webpack.config.js file, to expose the information necessary for "runtime module requiring/importing".

  • 1.1) Ensure that one of the following are set, to have webpack provide module path info: (otherwise this library falls back to guessing the module's name from the variables where it's imported)
    • 1.1.A) Set config.optimization.moduleIds: "named" (in wp <=4: config.optimization.namedModules: true). [this is the cleanest way; and it's enabled by default when config.mode == "development"]
    • 1.1.B) Set config.output.pathinfo: true. [not as clean, since relies on regular-expressions, but should work]
  • 1.2) The setting tweaks below are only relevant for prod builds, and only if you're using a recent webpack version. (where prod builds have these optimizations enabled by default; ie. no need to tweak these if WRR usage is undesired in prod)
    • 1.2.1) Recommended config, if you want WRR usable in prod:

      // disable concatenation/merging of modules, even in prod
      // (otherwise webpack merges many modules, causing exports between them to be removed/privatized)
      config.optimization.concatenateModules = false;

    • 1.2.2) You may also want to tell webpack prod-builds to never remove unused exports -- for example, if there's a class that is only used in a single file, but you still want runtime access to inspect static variables or the like. To do so:

      // disable removal/privatizing of unused exports, even in prod
      // (otherwise webpack-runtime-require can't access unused-from-other-module exports)
      config.optimization.usedExports = false;

    • Note: These two tweaks will likely increase the size of your builds slightly (in my project, by ~10%). So weigh whether the slight size increase is worth it relative to improved inspection/debugging in your prod builds.

• 2) Add some way for the library to access the webpack data.

  This is generally as simple as importing it from one of the files in your main project/chunk:

  import "webpack-runtime-require";

  If that fails, try the following: (make sure the below runs before any uses of the wrr fields/functions)

  import {Init} from "webpack-runtime-require";
  
  // if you're using typescript, uncomment the line below
  //declare var __webpack_require__, __webpack_modules__, __webpack_module_cache__;
  
  Init({
  	__webpack_require__,
  	// omit the two below if on Webpack 4 or below
  	__webpack_modules__: __webpack_modules__, // don't collapse this; can confuse babel/webpack
  	__webpack_module_cache__,
  });

  (If even that fails, try using one of the older versions of webpack-runtime-require [0.3.3 or older], which has a couple other approaches for finding/supplying the data.)

  After importing/initialization, the library will create a window.wrr object. This object exposes structures and functions for accessing the contents of any module within the Webpack bundle.

• 3) Use the window.wrr object in dev-tools (or the wrr export in compile-time code) to access module contents.

  • 3.A) A dev-tools example, of importing based on module/file name:

    let React = wrr.Module("react");
    console.log("Retrieved Component class from react:", React.Component);
    
    // if path was "./Path/To/MyComponent", specify just the file-name
    let MyComponent = wrr.Module("MyComponent");
    console.log("Retrieved MyComponent:", MyComponent);
    
    // if you want to import by path instead of file-name, see here:
    //   https://github.com/Venryx/webpack-runtime-require/issues/3#issuecomment-864035793

  • 3.B) A dev-tools example, of importing based on export name:

    wrr.Start();
    let Component = wrr.Export("Component"); // retrieved from the "react" library
    console.log("Retrieved Component class from react:", Component);

  • 3.C) A compile-time code example, of doing some of the operations above:

    import {wrr} from "webpack-runtime-require";
    console.log("Retrieved Component class from react:", wrr.Export("Component"));
    console.log("All react exports:", Object.entries(wrr.Module("react")));

Additional usage

If you're using the dev-tools console, you can see autocomplete for the modules:

• 1) Type and run: wrr.Start() (this triggers the module finding/processing)
• 2) Type: wrr.moduleExports. (or wrr.moduleExports_byShortName.)

You should then see all the modules in your app displayed in the autocomplete dropdown.

Other useful contents of the window.wrr structure:

• wrr.moduleExports_flat: Contains the exports from every module, stored by export name rather than module name.
• wrr.webpackData: The raw data-structures retrieved from webpack.