{"id":22182,"library":"rollup-plugin-preserve-use-client","title":"rollup-plugin-preserve-use-client","description":"A Rollup plugin to preserve the 'use client' directive in React 18 components during bundling, ensuring proper separation between server and client components. Current stable version is 3.0.1, released under MIT, with ESM and CJS support and TypeScript type definitions. Unlike alternatives like rollup-plugin-preserve-directives, this plugin does not require 'preserveModules: true', avoiding conflicts with CSS module imports. The plugin uses Rollup's moduleParsed hook (v3.0.0+) and targets Rollup ^4.0.0 as a peer dependency. It solves a specific pain point for library authors distributing npm packages with both server and client components.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/soobing/rollup-plugin-preserve-use-client","tags":["javascript","rollup-plugin","rollup","plugin","react","use client","server components","client components","typescript"],"install":[{"cmd":"npm install rollup-plugin-preserve-use-client","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-preserve-use-client","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-preserve-use-client","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency, version ^4.0.0","package":"rollup","optional":false}],"imports":[{"note":"Default export only; named import causes undefined error.","wrong":"import { preserveUseClientDirective } from 'rollup-plugin-preserve-use-client'","symbol":"default","correct":"import preserveUseClientDirective from 'rollup-plugin-preserve-use-client'"},{"note":"CommonJS: use default require, not destructured named import.","wrong":"const { preserveUseClientDirective } = require('rollup-plugin-preserve-use-client')","symbol":"default","correct":"const preserveUseClientDirective = require('rollup-plugin-preserve-use-client')"},{"note":"Type import for TypeScript; the type is not a runtime value, so regular import at runtime may cause error.","wrong":"import { PreserveUseClientOptions } from 'rollup-plugin-preserve-use-client'","symbol":"PreserveUseClientOptions","correct":"import type { PreserveUseClientOptions } from 'rollup-plugin-preserve-use-client'"}],"quickstart":{"code":"import preserveUseClientDirective from 'rollup-plugin-preserve-use-client';\nimport { defineConfig } from 'rollup';\n\nexport default defineConfig({\n  input: 'src/index.js',\n  output: {\n    dir: 'dist',\n    format: 'esm',\n  },\n  plugins: [\n    preserveUseClientDirective(),\n  ],\n});","lang":"typescript","description":"Basic Rollup configuration using ESM imports. Adds the plugin to preserve 'use client' directives in bundled output."},"warnings":[{"fix":"Update to v3.0.0+ and verify no reliance on previous transform-based internals.","message":"v3.0.0 changed hook from 'transform' to 'moduleParsed' for detecting 'use client' directives. Custom configuration relying on plugin-specific behavior may break.","severity":"breaking","affected_versions":">=3.0.0 <3.0.0"},{"fix":"Upgrade to v2.0.0 or later. If using ES modules, ensure import syntax is correct.","message":"v2.0.0 introduced ESM and CJS support. Older v1.x only supported CommonJS and may be incompatible with modern Rollup setups.","severity":"deprecated","affected_versions":"<2.0.0"},{"fix":"Use only one directive-preserving plugin, or ensure they do not interfere.","message":"Plugins like rollup-plugin-preserve-directives may conflict if used together. This plugin only preserves 'use client', not other directives like 'use strict'.","severity":"gotcha","affected_versions":"*"},{"fix":"Ensure 'use client' is a literal string at the top of each client component module.","message":"The plugin only preserves directives in modules identified with 'use client' at the top of the file. Dynamically inserted or injected directives are not handled.","severity":"gotcha","affected_versions":"*"},{"fix":"Place 'use client' as the first statement in the file, before any imports or other code.","message":"If using Vite's environment variables or custom transformations that alter directive placement, the plugin may not detect the directive correctly.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use default import: import preserveUseClientDirective from 'rollup-plugin-preserve-use-client'","cause":"Attempted to import named export but plugin uses default export only.","error":"Error: The named export 'preserveUseClientDirective' is not provided by the module 'rollup-plugin-preserve-use-client'"},{"fix":"Ensure you call the imported default as a function: preserveUseClientDirective()","cause":"Possible incorrect import or missing plugin invocation (called as property instead of function).","error":"TypeError: preserveUseClientDirective is not a function"},{"fix":"Run: npm install rollup-plugin-preserve-use-client --save-dev","cause":"Package not installed or incorrect path.","error":"Error: Cannot find module 'rollup-plugin-preserve-use-client'"},{"fix":"Update Rollup to v4.x: npm install rollup@^4.0.0","cause":"Incompatible Rollup version installed.","error":"RollupError: This plugin requires Rollup version ^4.0.0"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}