{"id":20605,"library":"systemjs-webpack-interop","title":"systemjs-webpack-interop","description":"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.","status":"active","version":"2.3.7","language":"javascript","source_language":"en","source_url":"https://github.com/joeldenning/systemjs-webpack-interop","tags":["javascript","typescript"],"install":[{"cmd":"npm install systemjs-webpack-interop","lang":"bash","label":"npm"},{"cmd":"yarn add systemjs-webpack-interop","lang":"bash","label":"yarn"},{"cmd":"pnpm add systemjs-webpack-interop","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency: the bundle is meant to be loaded by SystemJS","package":"systemjs","optional":false},{"reason":"Peer dependency: used as a webpack plugin or with webpack config","package":"webpack","optional":true}],"imports":[{"note":"This plugin is a default export from a subpath. It is not exported from the main entry.","wrong":"const { SystemJSPublicPathWebpackPlugin } = require('systemjs-webpack-interop')","symbol":"SystemJSPublicPathWebpackPlugin","correct":"import SystemJSPublicPathWebpackPlugin from 'systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin'"},{"note":"Main entry exports named functions. TypeScript definitions are included.","wrong":"const getWebpackConfig = require('systemjs-webpack-interop').getWebpackConfig","symbol":"getWebpackConfig","correct":"import { getWebpackConfig } from 'systemjs-webpack-interop'"},{"note":"ensureWebpackConfig is a named export, not default.","wrong":"import ensureWebpackConfig from 'systemjs-webpack-interop'","symbol":"ensureWebpackConfig","correct":"import { ensureWebpackConfig } from 'systemjs-webpack-interop'"},{"note":"The auto public path is a side-effect import that runs at module evaluation. No named export for this; use the subpath import.","wrong":"import { setPublicPath } from 'systemjs-webpack-interop'","symbol":"auto public path (side-effect import)","correct":"import 'systemjs-webpack-interop/auto-public-path'"}],"quickstart":{"code":"// webpack.config.js\nconst SystemJSPublicPathWebpackPlugin = require('systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin');\n\nmodule.exports = {\n  output: {\n    libraryTarget: 'system',\n    publicPath: ''\n  },\n  plugins: [\n    new SystemJSPublicPathWebpackPlugin({\n      rootDirectoryLevel: 1,\n      systemjsModuleName: '@org/my-app'\n    })\n  ]\n};\n\n// entry.js\nimport 'systemjs-webpack-interop/auto-public-path';\n\n// your app code...\nexport { bootstrap, mount, unmount } from 'single-spa';","lang":"javascript","description":"Shows how to configure webpack for SystemJS interop using the plugin and auto-public-path import."},"warnings":[{"fix":"Remove systemjsModuleName when using webpack 5.","message":"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.","severity":"gotcha","affected_versions":">=2.3.0"},{"fix":"Use auto-public-path import or the webpack plugin instead.","message":"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.","severity":"deprecated","affected_versions":">=2.2.0"},{"fix":"Use rootDirectoryLevel >= 1, where 1 means current directory.","message":"Root directory level defaults to 1. Setting rootDirectoryLevel: 0 may cause incorrect public path (empty string).","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Include polyfills (e.g., core-js/stable/url) before loading the bundle.","message":"IE11 requires polyfills for URL and URLSearchParams. The auto-public-path script uses these APIs.","severity":"gotcha","affected_versions":">=2.1.0"},{"fix":"Replace setPublicPath calls with import 'systemjs-webpack-interop/auto-public-path' or SystemJSPublicPathWebpackPlugin.","message":"The old approach using setPublicPath function has been removed. Use the subpath imports or plugin instead.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Update to v2.3.3+ which encodes SystemJS module name for Windows compatibility.","message":"Windows paths: The auto-public-path detects module URL from document.currentScript, but on Windows the URL may contain backslashes; encoding issues reported.","severity":"gotcha","affected_versions":"<2.3.3"},{"fix":"Ensure the bundle is loaded via SystemJS import map for correct behavior.","message":"The plugin only works when the bundle is loaded via SystemJS. If used directly via <script> tag, public path may be incorrect.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run npm install systemjs-webpack-interop and ensure import path is correct: 'systemjs-webpack-interop/auto-public-path' (without file extension).","cause":"Missing dependency or incorrect path import.","error":"Module not found: Error: Can't resolve 'systemjs-webpack-interop/auto-public-path'"},{"fix":"Use: const SystemJSPublicPathWebpackPlugin = require('systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin').default; or import SystemJSPublicPathWebpackPlugin from 'systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin';","cause":"Trying to use default import as named import or incorrect require.","error":"TypeError: SystemJSPublicPathWebpackPlugin is not a constructor"},{"fix":"Ensure systemjs-webpack-interop is in package.json dependencies and npm install (or yarn install) has been run.","cause":"Package not installed or misconfigured in node_modules.","error":"Error: Cannot find module 'systemjs-webpack-interop'"},{"fix":"Update to v2.3.5+ which removed destructuring, or use polyfills.","cause":"Auto-public-path uses destructuring or other ES6+ syntax not supported in IE11.","error":"Uncaught SyntaxError: Unexpected token ... in file 'systemjs-webpack-interop/auto-public-path' (in older browsers)","affected_versions":"<2.3.5"},{"fix":"Use the auto-public-path subpath import or the webpack plugin instead.","cause":"Trying to import setPublicPath from main entry, but it has been removed.","error":"setPublicPath is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}