Webpack HTTP Resource Loader

0.4.3 verified Thu Apr 23 auth: no javascript abandoned

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.

Common errors

error Module not found: Error: Can't resolve 'http://...' in '...' ↓

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.

fix

Ensure externals: [require('webpack-require-http')] (or require('webpack-require-http').custom(...)) is correctly placed within your webpack configuration's top-level object.

error ReferenceError: [global_variable] is not defined ↓

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.

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.

error TypeError: require is not a function ↓

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.

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.

Warnings

breaking 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. ↓

fix Consider migrating to modern Webpack features like Module Federation, dynamic `import()`, or asset modules for handling remote dependencies instead of this plugin.

gotcha 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. ↓

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.

deprecated 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. ↓

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.

gotcha 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. ↓

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.

Install

npm install webpack-require-http

yarn add webpack-require-http

pnpm add webpack-require-http

Imports

webpack-require-http
wrong
```
import webpackRequireHttp from 'webpack-require-http';
```
correct
```
const webpackRequireHttp = require('webpack-require-http');
```
This package is CommonJS-only and intended for use within webpack's `externals` configuration, which typically processes CommonJS syntax.
custom
wrong
```
import { custom } from 'webpack-require-http';
```
correct
```
const customHttpResolver = require('webpack-require-http').custom;
```
The `custom` method is an export from the main CommonJS module for defining custom URL resolution rules.

Quickstart

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`.

const webpack = require('webpack');
const path = require('path');
const webpackRequireHttp = require('webpack-require-http');

// Basic webpack configuration demonstrating `webpack-require-http`
const config = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  externals: [
    webpackRequireHttp
  ],
};

// Example content for src/index.js
// (This code would typically be in your source file, not directly in webpack.config.js)
/*
console.log('Loading remote resources...');
Promise.all([
    require('http://codemirror.net/lib/codemirror.css'),
    require('http://codemirror.net/lib/codemirror.js'),
    require('http://codemirror.net/addon/edit/matchbrackets.js'),
    require('http://codemirror.net/addon/comment/continuecomment.js'),
    require('http://codemirror.net/addon/comment/comment.js'),
    require('http://codemirror.net/mode/javascript/javascript.js')
]).then(function() {
    // CodeMirror would be available globally after these scripts load
    console.log('CodeMirror loaded:', typeof CodeMirror !== 'undefined');
    // You could then initialize CodeMirror here
}).catch(error => {
    console.error('Failed to load resources:', error);
});
*/

module.exports = config;