Registry / devops / rollup-plugin-preserve-use-client

rollup-plugin-preserve-use-client

library3.0.1jsnpmunverified

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.

devops

npm install rollup-plugin-preserve-use-client

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-PRES

rollup-plugin-preserve-use-client

devopsjavascriptv3.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import preserveUseClientDirective from 'rollup-plugin-preserve-use-client'

✗ import { preserveUseClientDirective } from 'rollup-plugin-preserve-use-client'

Default export only; named import causes undefined error.

default

✓ const preserveUseClientDirective = require('rollup-plugin-preserve-use-client')

✗ const { preserveUseClientDirective } = require('rollup-plugin-preserve-use-client')

CommonJS: use default require, not destructured named import.

PreserveUseClientOptions

✓ import type { PreserveUseClientOptions } from 'rollup-plugin-preserve-use-client'

✗ import { PreserveUseClientOptions } from 'rollup-plugin-preserve-use-client'

Type import for TypeScript; the type is not a runtime value, so regular import at runtime may cause error.

Basic Rollup configuration using ESM imports. Adds the plugin to preserve 'use client' directives in bundled output.

import preserveUseClientDirective from 'rollup-plugin-preserve-use-client'; import { defineConfig } from 'rollup'; export default defineConfig({ input: 'src/index.js', output: { dir: 'dist', format: 'esm', }, plugins: [ preserveUseClientDirective(), ], });

Debug

Known issues

breakingv3.0.0 changed hook from 'transform' to 'moduleParsed' for detecting 'use client' directives. Custom configuration relying on plugin-specific behavior may break.

fix

Update to v3.0.0+ and verify no reliance on previous transform-based internals.

affects: >=3.0.0 <3.0.0

deprecatedv2.0.0 introduced ESM and CJS support. Older v1.x only supported CommonJS and may be incompatible with modern Rollup setups.

fix

Upgrade to v2.0.0 or later. If using ES modules, ensure import syntax is correct.

affects: <2.0.0

gotchaPlugins like rollup-plugin-preserve-directives may conflict if used together. This plugin only preserves 'use client', not other directives like 'use strict'.

fix

Use only one directive-preserving plugin, or ensure they do not interfere.

affects: *

gotchaThe plugin only preserves directives in modules identified with 'use client' at the top of the file. Dynamically inserted or injected directives are not handled.

fix

Ensure 'use client' is a literal string at the top of each client component module.

affects: *

gotchaIf using Vite's environment variables or custom transformations that alter directive placement, the plugin may not detect the directive correctly.

fix

Place 'use client' as the first statement in the file, before any imports or other code.

affects: *

Errors

Common errors & fixes

Error: The named export 'preserveUseClientDirective' is not provided by the module 'rollup-plugin-preserve-use-client'

Attempted to import named export but plugin uses default export only.

fix

Use default import: import preserveUseClientDirective from 'rollup-plugin-preserve-use-client'

TypeError: preserveUseClientDirective is not a function

Possible incorrect import or missing plugin invocation (called as property instead of function).

fix

Ensure you call the imported default as a function: preserveUseClientDirective()

Error: Cannot find module 'rollup-plugin-preserve-use-client'

Package not installed or incorrect path.

fix

Run: npm install rollup-plugin-preserve-use-client --save-dev

RollupError: This plugin requires Rollup version ^4.0.0

Incompatible Rollup version installed.

fix

Update Rollup to v4.x: npm install rollup@^4.0.0

Upgrade

Version history

3.0.1latest on npm

Audit

Dependencies

rolluprequiredRequired peer dependency, version ^4.0.0

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/soobing/rollup-plugin-preserve-use-client ↗

packagehttps://www.npmjs.com/package/rollup-plugin-preserve-use-client ↗