{"id":18009,"library":"webpack-require-http","title":"Webpack HTTP Resource Loader","description":"webpack-require-http is a webpack plugin designed to enable the direct `require()` of HTTP and HTTPS resources within JavaScript code. This functionality is achieved by configuring it within webpack's `externals` option, where it transforms remote URL imports into asynchronous operations that fetch and inject the external scripts or stylesheets into the browser environment. The `require()` call then returns a `Promise` which resolves upon successful loading of the resource. The package, currently at version 0.4.3, was last updated in 2017, indicating it is no longer actively maintained. A key differentiator is its ability to accept custom rules (using regular expressions or functions) to rewrite or re-map requested URLs, offering flexibility in handling external resource paths. While it addressed a specific need for loading remote assets directly via `require` in earlier webpack versions, modern webpack (v5+) provides more robust and integrated solutions for handling external dependencies and remote modules, making this package largely superseded.","status":"abandoned","version":"0.4.3","language":"javascript","source_language":"en","source_url":"https://github.com/darkty2009/webpack-require-http","tags":["javascript","webpack","http","load","require","plugin","loader"],"install":[{"cmd":"npm install webpack-require-http","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-require-http","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-require-http","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package is CommonJS-only and intended for use within webpack's `externals` configuration, which typically processes CommonJS syntax.","wrong":"import webpackRequireHttp from 'webpack-require-http';","symbol":"webpack-require-http","correct":"const webpackRequireHttp = require('webpack-require-http');"},{"note":"The `custom` method is an export from the main CommonJS module for defining custom URL resolution rules.","wrong":"import { custom } from 'webpack-require-http';","symbol":"custom","correct":"const customHttpResolver = require('webpack-require-http').custom;"}],"quickstart":{"code":"const webpack = require('webpack');\nconst path = require('path');\nconst webpackRequireHttp = require('webpack-require-http');\n\n// Basic webpack configuration demonstrating `webpack-require-http`\nconst config = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  externals: [\n    webpackRequireHttp\n  ],\n};\n\n// Example content for src/index.js\n// (This code would typically be in your source file, not directly in webpack.config.js)\n/*\nconsole.log('Loading remote resources...');\nPromise.all([\n    require('http://codemirror.net/lib/codemirror.css'),\n    require('http://codemirror.net/lib/codemirror.js'),\n    require('http://codemirror.net/addon/edit/matchbrackets.js'),\n    require('http://codemirror.net/addon/comment/continuecomment.js'),\n    require('http://codemirror.net/addon/comment/comment.js'),\n    require('http://codemirror.net/mode/javascript/javascript.js')\n]).then(function() {\n    // CodeMirror would be available globally after these scripts load\n    console.log('CodeMirror loaded:', typeof CodeMirror !== 'undefined');\n    // You could then initialize CodeMirror here\n}).catch(error => {\n    console.error('Failed to load resources:', error);\n});\n*/\n\nmodule.exports = config;","lang":"javascript","description":"This quickstart demonstrates how to configure `webpack-require-http` in a basic webpack setup to allow `require()` calls for HTTP resources, showing the asynchronous nature of the loading process with `Promise.all`."},"warnings":[{"fix":"Consider migrating to modern Webpack features like Module Federation, dynamic `import()`, or asset modules for handling remote dependencies instead of this plugin.","message":"Incompatibility with Webpack 5+. Modern Webpack versions (5.x and later) have significantly changed their plugin API and module resolution mechanisms. This package, last updated in 2017, is highly likely to be incompatible, leading to build failures or unexpected runtime behavior.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Always use `.then()` or `await` with `require('http://...')` calls to ensure the resource is loaded before attempting to use it or any global variables it exposes.","message":"Asynchronous `require` behavior. Unlike standard CommonJS `require`, which is synchronous and returns the module's exports, `webpack-require-http`'s `require()` returns a `Promise`. Developers must use `.then()` or `await` to access resources, which can be a source of confusion if not expected.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Evaluate modern Webpack features for remote asset loading. For shared modules across multiple applications, Module Federation is recommended. For simple dynamic script injection, consider native `import()` or custom asset modules.","message":"Usage of `externals` for dynamic remote scripts is largely superseded. Modern Webpack offers more robust and integrated solutions for remote dependencies, such as Module Federation for sharing modules across applications, or native dynamic `import()` for loading remote scripts, making this `externals`-based approach less advisable and potentially less performant or secure.","severity":"deprecated","affected_versions":">=0.1.0"},{"fix":"Exercise extreme caution when using this package, especially in production environments. Prefer loading assets from trusted CDN sources with integrity checks if possible, or consider self-hosting critical external scripts. Regularly audit your dependencies.","message":"Potential security risks due to lack of maintenance and direct remote script loading. As an unmaintained package loading external resources directly into your application, there's an increased risk of supply chain attacks if the remote servers are compromised or if the package itself contains unpatched vulnerabilities.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Ensure `externals: [require('webpack-require-http')]` (or `require('webpack-require-http').custom(...)`) is correctly placed within your webpack configuration's top-level object.","cause":"The `webpack-require-http` plugin is not correctly configured in your `webpack.config.js` `externals` array, or Webpack is attempting to resolve the URL as a local module.","error":"Module not found: Error: Can't resolve 'http://...' in '...'"},{"fix":"Always wait for the `require()` Promise to resolve before attempting to use any global variables or side effects exposed by the remote script. Wrap usage in a `.then()` block or use `await`.","cause":"The external script loaded via `require('http://...')` relies on setting a global variable, but your code is trying to access it before the Promise has resolved and the script has fully executed.","error":"ReferenceError: [global_variable] is not defined"},{"fix":"Ensure your Webpack configuration and environment are set up to process CommonJS `require` calls. This package is not compatible with native ESM `import` statements for remote resources.","cause":"This plugin relies on the CommonJS `require` syntax and assumes a Webpack environment that transforms it. If you're using native ESM (`import`) or in a browser context where `require` is not defined, this error will occur.","error":"TypeError: require is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}