Registry / web-framework / systemjs-webpack-interop

systemjs-webpack-interop

library2.3.7jsnpmunverified

systemjs-webpack-interop (v2.3.7) helps create webpack bundles consumable by SystemJS as in-browser modules. It dynamically sets the webpack public path based on the URL from which a SystemJS module was loaded, and provides utilities to verify webpack config interop. The package ships TypeScript types, supports webpack 4 and 5, and requires systemjs>=6. It offers both a webpack plugin (SystemJSPublicPathWebpackPlugin) and code-based approaches for auto public path setting. Active maintenance, with frequent fixes for IE11 compatibility and Windows paths.

web-framework devops

npm install systemjs-webpack-interop

github ↗package ↗

INSTALL

IMPORT

SIG · SYSTEMJS-WEBPACK-I

systemjs-webpack-interop

web-frameworkjavascriptv2.3.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SystemJSPublicPathWebpackPlugin

✓ import SystemJSPublicPathWebpackPlugin from 'systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin'

✗ const { SystemJSPublicPathWebpackPlugin } = require('systemjs-webpack-interop')

This plugin is a default export from a subpath. It is not exported from the main entry.

getWebpackConfig

✓ import { getWebpackConfig } from 'systemjs-webpack-interop'

✗ const getWebpackConfig = require('systemjs-webpack-interop').getWebpackConfig

Main entry exports named functions. TypeScript definitions are included.

ensureWebpackConfig

✓ import { ensureWebpackConfig } from 'systemjs-webpack-interop'

✗ import ensureWebpackConfig from 'systemjs-webpack-interop'

ensureWebpackConfig is a named export, not default.

auto public path (side-effect import)

✓ import 'systemjs-webpack-interop/auto-public-path'

✗ import { setPublicPath } from 'systemjs-webpack-interop'

The auto public path is a side-effect import that runs at module evaluation. No named export for this; use the subpath import.

Shows how to configure webpack for SystemJS interop using the plugin and auto-public-path import.

// webpack.config.js const SystemJSPublicPathWebpackPlugin = require('systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin'); module.exports = { output: { libraryTarget: 'system', publicPath: '' }, plugins: [ new SystemJSPublicPathWebpackPlugin({ rootDirectoryLevel: 1, systemjsModuleName: '@org/my-app' }) ] }; // entry.js import 'systemjs-webpack-interop/auto-public-path'; // your app code... export { bootstrap, mount, unmount } from 'single-spa';

Debug

Known issues

gotchasystemjsModuleName is only needed for webpack 1-4. In webpack 5, it is ignored but must be omitted or set to undefined to avoid confusion.

fix

Remove systemjsModuleName when using webpack 5.

affects: >=2.3.0

deprecatedThe resource-query-public-path approach (import 'systemjs-webpack-interop/resource-query-public-path?systemjsModuleName=...') is deprecated in favor of SystemJSPublicPathWebpackPlugin or auto-public-path imports.

fix

Use auto-public-path import or the webpack plugin instead.

affects: >=2.2.0

breakingRoot directory level defaults to 1. Setting rootDirectoryLevel: 0 may cause incorrect public path (empty string).

fix

Use rootDirectoryLevel >= 1, where 1 means current directory.

affects: >=2.0.0

gotchaIE11 requires polyfills for URL and URLSearchParams. The auto-public-path script uses these APIs.

fix

Include polyfills (e.g., core-js/stable/url) before loading the bundle.

affects: >=2.1.0

deprecatedThe old approach using setPublicPath function has been removed. Use the subpath imports or plugin instead.

fix

Replace setPublicPath calls with import 'systemjs-webpack-interop/auto-public-path' or SystemJSPublicPathWebpackPlugin.

affects: >=2.0.0

gotchaWindows paths: The auto-public-path detects module URL from document.currentScript, but on Windows the URL may contain backslashes; encoding issues reported.

fix

Update to v2.3.3+ which encodes SystemJS module name for Windows compatibility.

affects: <2.3.3

gotchaThe plugin only works when the bundle is loaded via SystemJS. If used directly via <script> tag, public path may be incorrect.

fix

Ensure the bundle is loaded via SystemJS import map for correct behavior.

affects: all

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'systemjs-webpack-interop/auto-public-path'

Missing dependency or incorrect path import.

fix

Run npm install systemjs-webpack-interop and ensure import path is correct: 'systemjs-webpack-interop/auto-public-path' (without file extension).

TypeError: SystemJSPublicPathWebpackPlugin is not a constructor

Trying to use default import as named import or incorrect require.

fix

Use: const SystemJSPublicPathWebpackPlugin = require('systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin').default; or import SystemJSPublicPathWebpackPlugin from 'systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin';

Error: Cannot find module 'systemjs-webpack-interop'

Package not installed or misconfigured in node_modules.

fix

Ensure systemjs-webpack-interop is in package.json dependencies and npm install (or yarn install) has been run.

Uncaught SyntaxError: Unexpected token ... in file 'systemjs-webpack-interop/auto-public-path' (in older browsers)

Auto-public-path uses destructuring or other ES6+ syntax not supported in IE11.

fix

Update to v2.3.5+ which removed destructuring, or use polyfills.

setPublicPath is not a function

Trying to import setPublicPath from main entry, but it has been removed.

fix

Use the auto-public-path subpath import or the webpack plugin instead.

Upgrade

Version history

2.3.7latest on npm

Audit

Dependencies

systemjsrequiredRuntime peer dependency: the bundle is meant to be loaded by SystemJS

webpackoptionalPeer dependency: used as a webpack plugin or with webpack config

Agent activity

11 hits · last 30 days

node

Resources

githubhttps://github.com/joeldenning/systemjs-webpack-interop ↗

packagehttps://www.npmjs.com/package/systemjs-webpack-interop ↗