webpack-require-from

1.8.6 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin to control dynamic import chunk paths/URLs at runtime. v1.8.6 supports Webpack 2-5 and web workers. Lightweight, zero dependencies, production-tested. Unlike static output.publicPath, it allows runtime path overrides via a fixed path, a global variable, or a global method. Last release in 2021; stable maintenance mode.

Common errors

error Module not found: Error: Can't resolve 'tapable' ↓

cause tapable is a peer dependency and not automatically installed.

fix

Install tapable as a dev dependency: npm install tapable@^2.2.0 --save-dev

error TypeError: webpackRequireFrom is not a constructor ↓

cause Using ES module import syntax on a CJS module with default export.

fix

Use require('webpack-require-from') or for TypeScript: import WebpackRequireFrom = require('webpack-require-from')

error Uncaught ReferenceError: chunkURL is not defined ↓

cause Variable specified in 'variableName' option is not defined globally at runtime.

fix

Define window.chunkURL = 'your/path/' before any dynamic import.

Warnings

breaking v1.3.1: 'supressErrors' option renamed to 'suppressErrors' (typo fix). Old name still works but deprecated. ↓

fix Use 'suppressErrors' instead of 'supressErrors'.

deprecated v1.3.1: moved tapable from dependencies to peerDependencies. Ensure tapable@^2.2.0 is installed. ↓

fix npm install tapable@^2.2.0

gotcha The options 'path', 'variableName', and 'methodName' are mutually exclusive. Only one can be used at a time. ↓

fix Provide only one of these options in the plugin config.

gotcha VariableName option must be a global variable name; it is evaluated at runtime. Ensure the variable exists before dynamic imports occur. ↓

fix Define the variable on window or globalThis before any dynamic import.

gotcha For Webpack 5, ensure your Webpack version is compatible; v1.8.2 added Webpack 5 support. ↓

fix Use v1.8.2 or later for Webpack 5.

Install

npm install webpack-require-from

yarn add webpack-require-from

pnpm add webpack-require-from

Imports

WebpackRequireFrom

wrong

import WebpackRequireFrom from 'webpack-require-from';

correct

const WebpackRequireFrom = require('webpack-require-from');

Package is CJS-only; ESM import will fail. Use require().

WebpackRequireFrom

wrong

const WebpackRequireFrom = require('webpack-require-from');

correct

const WebpackRequireFrom = require('webpack-require-from').default;

For TypeScript projects with esModuleInterop, default export may need .default. Check your TS config.

WebpackRequireFrom as default

wrong

import WebpackRequireFrom from 'webpack-require-from';

correct

import WebpackRequireFrom = require('webpack-require-from');

When using TypeScript, use import = require() syntax for CJS modules.

Quickstart

Configures Webpack to resolve dynamic import chunks using a global function that can be defined at runtime.

// webpack.config.js
const WebpackRequireFrom = require('webpack-require-from');

module.exports = {
  output: {
    publicPath: '/static/',
  },
  plugins: [
    new WebpackRequireFrom({
      methodName: 'getChunkURL',
    }),
  ],
};

// In your browser code:
window.getChunkURL = function(chunkName) {
  return 'https://cdn.example.com/chunks/' + chunkName;
};