__non_webpack_require__ is not defined

Question

I am new to webpack and node, and I am wondering how to use the

__non_webpack_require__ 

function. I've visited webpack's website but am still confused as to what this function is and how I can use it. Could you provide a short description of a use case for this function and then how to use it in a node / react app?

Answer 1

Webpack processes every module that you use in your application starting from the entry point(s) and including every module you import (import or require) and includes it in your bundle. The __non_webpack_require__ is a function that will result in a plain require call.

Let's take this entry point as an example:

const processedByWebpack = require("./module");
const notProcessed = __non_webpack_require__("./non-webpack");

console.log(processedByWebpack);
console.log(notProcessed);

In this case webpack will bundle that application and include every module you import, which in this case is only the ./module.js. So the output will be:

/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

const processedByWebpack = __webpack_require__(1);
const notProcessed = require("./non-webpack");

console.log(processedByWebpack);
console.log(notProcessed);


/***/ }),
/* 1 */
/***/ (function(module, exports) {

module.exports = "This module is bundled with webpack"


/***/ })
/******/ ]);

The ./module.js module was included in the bundle and would also have been processed by any loaders if there were any applicable rules present. On the other hand, the ./non-webpack.js is not included in the bundle and webpack made it a call to require. This means that the ./non-webpack.js will be resolved when it's executed and it will fail with a runtime error if it isn't available or contains invalid JavaScript.

__non_webpack_require__ is a way to work around the fact that webpack processes all require calls. Because webpack bundles up all the modules, it must know which modules to include at compile time. This makes require more restrictive than it actually is in Node.js. For instance, you can't use dynamic requires, that means you can't use a variable as the module's path (see also webpack dynamic module loader by require). For example:

// Path to module as a variable (could be an argument to a function)
const modulePath = "./module";

const processedByWebpack = require(modulePath); // Fails
const notProcessed = __non_webpack_require__(modulePath);

In the regular require webpack will fail, because it doesn't know which modules to include to cover all the modules that could be referenced at runtime. In this example it might seem obvious, but it could go as far as using user input to determine the module to load. With __non_webpack_require__ it simply creates a require call and you'll have to deal with possible Module not found exceptions at runtime.

When should you use it?

Probably never. That's one of these functions that should be considered as last resort where you need to sidestep webpack to have some dynamic module resolution. In most situations there are other solutions to achieve the same goal (e.g. deferring imports to runtime by using Externals), everything else is an edge case.

You will have noticed that __non_webpack_require__ is transformed into a require call. This means that it only works in Node.js and fails in any browser environment unless you have a global require defined that may or may not do something special. Another downside is that it is webpack specific and when you want to use another tool (for instance for testing), it won't work or you'll have a hard time trying to work around it.