rollup-plugin-use-client

1.4.0 verified Mon Apr 27 auth: no javascript

Rollup plugin (v1.4.0) that re-adds the 'use client' directive stripped by Rollup during bundling, essential for React Server Components. Released December 2022, maintained on GitHub. Key differentiator: solves the specific problem of directive removal in Rollup, with configurable directive string and simple ESM API. Unmaintained since 2022.

Common errors

error TypeError: useClient is not a function ↓

cause Imported useClient as a named export instead of default.

fix

Change to: import useClient from 'rollup-plugin-use-client'

error 'use client' directive not added to output ↓

cause Plugin not included in Rollup plugins array or output file not covered.

fix

Ensure plugin is added to plugins array: plugins: [useClient()]

Warnings

gotcha Plugin adds 'use client' to top of every file processed; in single-bundle output, the directive may be added to the entire bundle, causing unintended behavior. ↓

fix Ensure code splitting is enabled or only apply plugin to specific files via include/exclude options.

gotcha The directive is inserted as a string literal at the top of the module; if used with plugins that expect the directive to be a comment or statement, it may not be recognized correctly. ↓

fix Use compatible bundler or check target runtime support.

Install

npm install rollup-plugin-use-client

yarn add rollup-plugin-use-client

pnpm add rollup-plugin-use-client

Imports

useClient

wrong

import { useClient } from 'rollup-plugin-use-client'

correct

import useClient from 'rollup-plugin-use-client'

Default export only; named import will result in undefined.

useClient

wrong

const { useClient } = require('rollup-plugin-use-client')

correct

const useClient = require('rollup-plugin-use-client')

CommonJS require returns the default export directly.

useClient

wrong

import * as useClient from 'rollup-plugin-use-client'

correct

import useClient from 'rollup-plugin-use-client'

Namespace import is not the default; use default import.

Quickstart

Shows basic setup to add 'use client' directive in Rollup config.

// Install: npm install --save-dev rollup-plugin-use-client
import useClient from 'rollup-plugin-use-client';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    useClient()
  ]
};