{"id":17520,"library":"cep-bundler-webpack","title":"Webpack Bundler for Adobe CEP","description":"cep-bundler-webpack is a specialized Webpack bundler designed for creating Adobe Common Extensibility Platform (CEP) extensions, specifically supporting ExtendScript and modern web technologies like TypeScript. Currently at version 0.2.0, it provides a `createConfig` function to generate a Webpack configuration tailored for CEP's unique requirements, abstracting away much of the boilerplate. It is part of the `adobe-extension-tools` ecosystem, indicating its close association with Adobe extension development efforts. While at an early version, it aims to streamline the development workflow for Adobe Creative Cloud extensions by handling complex build processes, enabling features like TypeScript compilation. Its primary differentiator is its deep integration with the Adobe CEP environment, providing an opinionated but flexible build setup for a niche, yet powerful, extension platform.","status":"active","version":"0.2.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","Adobe","CEP","ExtendScript","TypeScript","Bundler","Extension","Plugin","Webpack"],"install":[{"cmd":"npm install cep-bundler-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add cep-bundler-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add cep-bundler-webpack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core bundling engine; required as a peer dependency for any webpack bundler.","package":"webpack","optional":false},{"reason":"Command line interface for running webpack builds; commonly used with webpack setups.","package":"webpack-cli","optional":false},{"reason":"Provides core utilities and functionality for CEP bundling, likely an internal dependency of the adobe-extension-tools ecosystem.","package":"cep-bundler-core","optional":false}],"imports":[{"note":"Webpack configuration files must typically use CommonJS `require` syntax, even in projects configured for ESM.","wrong":"import { createConfig } from 'cep-bundler-webpack';","symbol":"createConfig","correct":"const { createConfig } = require('cep-bundler-webpack');"}],"quickstart":{"code":"// webpack.config.js\nconst { createConfig } = require('cep-bundler-webpack');\n\nmodule.exports = createConfig({\n  // Entry point for your CEP extension's UI\n  entry: './src/index.ts',\n  // Output directory for the bundled files\n  output: {\n    filename: 'bundle.js',\n    path: require('path').resolve(__dirname, 'dist/client'),\n  },\n  // Additional Webpack configuration specific to your project\n  // For example, if you need custom loaders or plugins\n  devServer: {\n    port: 9000,\n    hot: true,\n    compress: true,\n    static: { directory: require('path').join(__dirname, 'dist') },\n  },\n  // CEP-specific configuration, often managed via package.json or environment vars\n  // This object allows direct override or extension of generated CEP manifest data\n  cep: {\n    id: 'com.yourcompany.yourextension',\n    name: 'My CEP Extension',\n    version: '1.0.0',\n    hosts: ['PHXS', 'ILST', 'IDSN'], // Specify target Adobe applications\n    // Other CEP-specific options like port, debug, etc.\n  },\n});\n\n// package.json (excerpt)\n/*\n{\n  \"name\": \"my-cep-extension\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A simple Adobe CEP extension\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"start\": \"webpack serve --config webpack.config.js\",\n    \"build\": \"webpack --config webpack.config.js --mode production\",\n    \"dev\": \"webpack --config webpack.config.js --mode development\",\n  },\n  \"keywords\": [\"Adobe\", \"CEP\", \"ExtendScript\", \"TypeScript\", \"Webpack\"],\n  \"dependencies\": {\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"cep-bundler-webpack\": \"^0.2.0\",\n    \"webpack\": \"^5.0.0\",\n    \"webpack-cli\": \"^5.0.0\",\n    \"webpack-dev-server\": \"^4.0.0\",\n    \"typescript\": \"^5.0.0\",\n    \"ts-loader\": \"^9.0.0\"\n  }\n}\n*/\n\n// src/index.ts\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst App: React.FC = () => {\n  return (\n    <div>\n      <h1>Hello, Adobe CEP!</h1>\n      <p>Bundled with cep-bundler-webpack</p>\n    </div>\n  );\n};\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  ReactDOM.createRoot(rootElement).render(\n    <React.StrictMode>\n      <App />\n    </React.StrictMode>\n  );\n} else {\n  console.error('Root element not found');\n}\n\n// Basic ExtendScript communication (example)\ndeclare global {\n  interface Window {\n    CSInterface: any; // Adobe CEP's CSInterface object\n  }\n}\n\nif (window.CSInterface) {\n  const csInterface = new window.CSInterface();\n  csInterface.evalScript('alert(\"Hello from ExtendScript!\");');\n}\n","lang":"typescript","description":"This quickstart demonstrates how to set up a basic Adobe CEP extension using `cep-bundler-webpack` with a `webpack.config.js` file and a React/TypeScript entry point, including a minimal ExtendScript interaction. It also outlines the necessary `package.json` scripts and dependencies for development and production builds."},"warnings":[{"fix":"Always pin to an exact package version (e.g., `\"cep-bundler-webpack\": \"0.2.0\"`) and consult the project's GitHub repository or source code for changes when upgrading.","message":"As this package is in an early development phase (v0.2.0), minor version updates may introduce breaking changes to the `createConfig` API or the generated Webpack configuration structure. Developers should pin exact versions and review release notes carefully.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Ensure your `webpack.config.js` uses `const { createConfig } = require('cep-bundler-webpack');` and `module.exports = createConfig(...);`. If your project's `package.json` specifies `\"type\": \"module\"`, name your webpack config file `webpack.config.cjs` to explicitly treat it as CommonJS.","message":"Webpack configuration files (like `webpack.config.js`) must be written in CommonJS (`module.exports = { ... }`) syntax, even if your main project uses ES Modules (`\"type\": \"module\"` in `package.json`). Using `import` statements directly in `webpack.config.js` will cause build failures.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Only use `cep-bundler-webpack` for its intended purpose: building Adobe CEP extensions. For other projects, use general-purpose Webpack configurations or bundlers.","message":"This bundler is specifically tailored for Adobe CEP extensions. Attempting to use it for generic web projects or other plugin architectures will likely result in incorrect configurations or missing functionalities, as it expects specific CEP manifest and runtime considerations.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Familiarize yourself with Adobe's official documentation for CEP debugging, and ensure your CEP extension is configured for debug mode (often by creating a `.debug` file or specifying debug in the manifest).","message":"Developing Adobe CEP extensions requires specific debugging setups (e.g., debug mode enabled in `manifest.xml`, Chrome DevTools for the browser context, and ESTK/VS Code for ExtendScript). This bundler facilitates the build, but developers must still understand the CEP debugging workflow.","severity":"gotcha","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Change `import { createConfig } from 'cep-bundler-webpack';` to `const { createConfig } = require('cep-bundler-webpack');` in your `webpack.config.js`. If your `package.json` specifies `\"type\": \"module\"`, rename `webpack.config.js` to `webpack.config.cjs`.","cause":"Attempting to use ES Module `import` syntax in `webpack.config.js` instead of CommonJS `require`.","error":"TypeError: createConfig is not a function OR SyntaxError: Cannot use import statement outside a module"},{"fix":"Ensure `webpack`, `webpack-cli`, and any loaders/plugins referenced in `createConfig` or your custom config are installed (e.g., `npm install --save-dev webpack webpack-cli ts-loader`). Verify that `entry` and `output` paths are correct in your `webpack.config.js`.","cause":"Missing `webpack` or `webpack-cli` or other essential dependencies, or incorrect resolution paths within the webpack configuration.","error":"Error: Webpack can't find 'some-module' OR Module not found: Error: Can't resolve 'some-module'"},{"fix":"Check the `cep` object passed to `createConfig` for correct `id`, `name`, `version`, and `hosts`. Refer to `cep-bundler-core` documentation for expected CEP configuration schema. Ensure the build output matches the structure expected by Adobe applications for extensions.","cause":"Incorrect or missing CEP configuration (e.g., `cep` object in `createConfig` or `package.json`), preventing the bundler from correctly generating the `manifest.xml` or placing it in the expected structure.","error":"Error: Manifest.xml could not be generated OR Extension does not appear in Adobe host application"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}