systemjs-webpack-interop

2.3.7 verified Sat Apr 25 auth: no javascript

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.

Common errors

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

cause 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).

error TypeError: SystemJSPublicPathWebpackPlugin is not a constructor ↓

cause 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 Error: Cannot find module 'systemjs-webpack-interop' ↓

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

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

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

error setPublicPath is not a function ↓

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

Warnings

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

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

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

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

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

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

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

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

Install

npm install systemjs-webpack-interop

yarn add systemjs-webpack-interop

pnpm add systemjs-webpack-interop

Imports

SystemJSPublicPathWebpackPlugin

wrong

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

correct

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

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

getWebpackConfig

wrong

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

correct

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

Main entry exports named functions. TypeScript definitions are included.

ensureWebpackConfig

wrong

import ensureWebpackConfig from 'systemjs-webpack-interop'

correct

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

ensureWebpackConfig is a named export, not default.

auto public path (side-effect import)
wrong
```
import { setPublicPath } from 'systemjs-webpack-interop'
```
correct
```
import 'systemjs-webpack-interop/auto-public-path'
```
The auto public path is a side-effect import that runs at module evaluation. No named export for this; use the subpath import.

Quickstart

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';