{"id":15842,"library":"subapp-pbundle","title":"Electrode Subapp for Preact and Redux Bundler","description":"This module, `subapp-pbundle`, version 1.1.1, serves as an integration layer for Electrode subapps utilizing the Preact UI framework and `redux-bundler` for state management. It essentially re-exports core functionalities from `subapp-web` and adapts them for Preact, including re-exporting Preact's `h`, `Component`, and `render` APIs for convenience. A key differentiator is its `reduxBundlerLoadSubApp` API, specifically designed for loading `redux-bundler`-based subapps within the Electrode ecosystem. The package is primarily distributed as ES modules, advocating for modern bundling practices like tree-shaking. While it provides server-side rendering (SSR) context support via `AppContext`, further support for advanced features like React Router and Preact Suspense remains \"TBD,\" suggesting a slower release cadence or a maintenance-focused development cycle since its initial release around 2016 by WalmartLabs.","status":"maintenance","version":"1.1.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","web","react","subapp","redux","react-router"],"install":[{"cmd":"npm install subapp-pbundle","lang":"bash","label":"npm"},{"cmd":"yarn add subapp-pbundle","lang":"bash","label":"yarn"},{"cmd":"pnpm add subapp-pbundle","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the Preact UI framework.","package":"preact","optional":false},{"reason":"Required as a peer dependency for server-side rendering with Preact.","package":"preact-render-to-string","optional":false},{"reason":"Provides Babel helper functions for transpiled ES5 code.","package":"@babel/runtime","optional":false}],"imports":[{"note":"The package is ESM-only; CommonJS require() will not work for named exports.","wrong":"const { h, reduxBundlerLoadSubApp } = require('subapp-pbundle');","symbol":"h, reduxBundlerLoadSubApp","correct":"import { h, reduxBundlerLoadSubApp } from 'subapp-pbundle';"},{"note":"AppContext is a Preact Context object for SSR data, and requires ES Module import.","wrong":"const { AppContext } = require('subapp-pbundle');","symbol":"AppContext","correct":"import { AppContext } from 'subapp-pbundle';"},{"note":"For convenience, core Preact APIs 'Component' and 'render' are re-exported from 'subapp-pbundle'.","wrong":"import { Component, render } from 'preact';","symbol":"Component, render","correct":"import { Component, render } from 'subapp-pbundle';"}],"quickstart":{"code":"/** @jsx h */\nimport { h, reduxBundlerLoadSubApp, AppContext } from \"subapp-pbundle\";\nimport { useState } from 'preact/hooks'; // Assuming preact/hooks is also available\n\nconst MyPreactComponent = () => {\n  const [count, setCount] = useState(0);\n  return (\n    <AppContext.Consumer>\n      {({ isSsr, ssr, subApp }) => (\n        <div>\n          <h1>My Electrode Subapp</h1>\n          <p>Current count: {count}</p>\n          <button onClick={() => setCount(count + 1)}>Increment</button>\n          <p>Running on SSR: {`${Boolean(isSsr)}`}</p>\n          {isSsr && ssr && ssr.request && <p>Request URL: {ssr.request.url ?? 'N/A'}</p>}\n          <p>Subapp name: {subApp?.name ?? 'Unknown'}</p>\n        </div>\n      )}\n    </AppContext.Consumer>\n  );\n};\n\nexport default reduxBundlerLoadSubApp({ name: \"MyComponent\", Component: MyPreactComponent });","lang":"javascript","description":"Demonstrates defining an Electrode subapp with Preact, using `reduxBundlerLoadSubApp` and accessing SSR context via `AppContext`."},"warnings":[{"fix":"Ensure your project uses ES module syntax (`import`/`export`) and is configured for ESM. Modern bundlers like Webpack 4+ or Rollup handle this automatically, but legacy environments might require specific configuration.","message":"This package is distributed as ES Modules (ESM) only. Attempting to use CommonJS `require()` syntax will result in errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Install `preact` and `preact-render-to-string` using your package manager: `npm install preact preact-render-to-string` or `yarn add preact preact-render-to-string`.","message":"`preact` and `preact-render-to-string` are declared as peer dependencies and must be installed explicitly in your project's `package.json`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Integrate a polyfill service like `polyfill.io` or include necessary polyfills (e.g., using `core-js` with Babel) in your application's build process to ensure broad browser compatibility.","message":"The package assumes the presence of polyfills for modern ES6+ APIs (e.g., `Promise`, Array methods) in the runtime environment. These are not bundled with `subapp-pbundle`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Rename your file to `.mjs`, add `\"type\": \"module\"` to your `package.json`, or configure your build system (e.g., Webpack) to correctly handle ESM modules.","cause":"Attempting to use `import` or `export` syntax in a CommonJS (`.js` without `\"type\": \"module\"` in `package.json` or a `.cjs` file) Node.js environment.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Run `npm install preact preact-render-to-string` or `yarn add preact preact-render-to-string` in your project's root directory.","cause":"The peer dependencies `preact` or `preact-render-to-string` are not installed in the consuming project's `node_modules`.","error":"Error: Cannot find module 'preact' or 'Error: Cannot find module 'preact-render-to-string''"},{"fix":"Include a polyfill for ES6+ features in your application. Common solutions include `core-js` or a service like `polyfill.io`.","cause":"The runtime environment (e.g., older browser, specific Node.js version) is missing global ES6+ APIs like `Promise` or array iteration methods.","error":"ReferenceError: Promise is not defined"}],"ecosystem":"npm"}