Build react package for use in nextjs 13

[mnzsss]

I tried create a package with ui components for use in Nextjs 13 web app, but I can't build components with "use client" in the beginning of code, like that:

"use client"

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = AspectRatioPrimitive.Root

export { AspectRatio }

So when I build this code, the "use client" has removed:

Error on import component of package in app:

Obs.: The component needs to be imported into a server side file, in which case it would be the layout.tsx

Have a workround or option for this?

I use:

• turbo: ^1.7.4
• next: ^13.1.6
• tsup: ^6.1.3
• typescript: ^4.9.4

tsconfig.json of ui package:

{
  "compilerOptions": {
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "inlineSources": false,
    "isolatedModules": true,
    "moduleResolution": "node",
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true,
    "lib": ["ES2015", "DOM"],
    "module": "ESNext",
    "target": "ES6",
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["."],
  "exclude": ["dist", "build", "node_modules"]
}

tsup.config.ts

[zeakd]

I'm not maintainer, but I think this is out of tsup role scope and you should create wrapping component of it outside of app directory.

// components/AspectRatio.js
export { AspectRatio } from 'your-pkg'

// or inside app directory,
// app/.../AspectRatio.js
"use client"
export { AspectRatio } from 'your-pkg'

But if you have to, how about to use esbuild inject option?

export default defineConfig({
  ...
  esbuildOptions(options, context) {
    options.inject?.push('./inject.js');
  },
})

// inject.js
"use client"

[mnzsss]

I'm not maintainer, but I think this is out of tsup role scope and you should create wrapping component of it outside of app directory.

// components/AspectRatio.js
export { AspectRatio } from 'your-pkg'

// or inside app directory,
// app/.../AspectRatio.js
"use client"
export { AspectRatio } from 'your-pkg'

But if you have to, how about to use esbuild inject option?

export default defineConfig({
  ...
  esbuildOptions(options, context) {
    options.inject?.push('./inject.js');
  },
})

// inject.js
"use client"

I partial solved this problem using a wrapper too, but I guess using inject script is better. I will try that.

[syjung-cookapps]

@mnzsss
Did you clear your problem? I still have issues with use inject option..

[michael-land]

export default defineConfig({
  ...
  esbuildOptions(options, context) {
    options.inject?.push('./inject.js');
  },
})

does not work for me. any suggestion?

[mnzsss]

I'm not maintainer, but I think this is out of tsup role scope and you should create wrapping component of it outside of app directory.

// components/AspectRatio.js
export { AspectRatio } from 'your-pkg'

// or inside app directory,
// app/.../AspectRatio.js
"use client"
export { AspectRatio } from 'your-pkg'

But if you have to, how about to use esbuild inject option?

export default defineConfig({
  ...
  esbuildOptions(options, context) {
    options.inject?.push('./inject.js');
  },
})

// inject.js
"use client"

I partial solved this problem using a wrapper too, but I guess using inject script is better. I will try that.

@michael-land
@syjung-cookapps

This way not works for me too, I hadn't time to test it and today I found another way to made that.

// tsup.config.ts

import { defineConfig } from "tsup"

export default defineConfig((options) => ({
  entry: ["src/index.tsx"],
  format: ["esm", "cjs"],
  treeshake: true,
  splitting: true,
  dts: true,
  minify: true,
  clean: true,
  external: ["react"],
  onSuccess: "./scripts/post-build.sh",
  ...options,
}))

# ./scripts/post-build.sh

#!/bin/bash

sed -i '1,1s/^/"use client"; /' ./dist/index.js
sed -i '1,1s/^/"use client"; /' ./dist/index.mjs

This script runs on index.js and index.mjs files.

If you use Next.js we can use the transpilePackages option in next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  transpilePackages: ["ui"],
}

export default nextConfig

[jlarmstrongiv]

Another option may be using these packages:

• https://www.npmjs.com/package/server-only
• https://www.npmjs.com/package/client-only

To ensure that a clear error is thrown, such as:

throw new Error(
  "This module cannot be imported from a Server Component module. " +
    "It should only be used from a Client Component."
);

Those packages do have side effects though https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

---

Though, I agree that the best way would be to keep those annotations with the component. The problem is that all files that import client components must always be marked with the "use client" directive, including the root index file.

Perhaps multiple exports would help to separate shared, client, and server components:

• how to keep original directory structure？ #728
• I would like to export separated build for web and mobile #727

After more research, I also found:

• index file definitely needs the "use client" directive https://twitter.com/souporserious/status/1608923451699630081
• esbuild doesn’t support the directives https://twitter.com/souporserious/status/1608954125764669442
• example esbuild plugin https://twitter.com/souporserious/status/1609003588931420161

The solution I will go with today is the multiple exports + custom esbuild plugin (using the original file naming conventions, related)

[oagix]

The Custom ESBuild plugin won't work because of this: Module level directives cause errors when bundled, "use client" in "dist/index.js" was ignored. - any clue how to fix it?

[mnzsss]

The Custom ESBuild plugin won't work because of this: Module level directives cause errors when bundled, "use client" in "dist/index.js" was ignored. - any clue how to fix it?

@altechzilla I think this lib can help you https://github.com/Ephem/rollup-plugin-preserve-directives

[tcolinpa]

NextJS docs gives two examples on how to inject directives as wrapper.

https://nextjs.org/docs/getting-started/react-essentials#library-authors
https://github.com/shuding/react-wrap-balancer/blob/main/tsup.config.ts#L10-L13

esbuildOptions: (options) => {
      options.banner = {
        js: '"use client"',
      };
    },

EDIT: It didn't work for me.

[teobler]

I faced the same issue with @tcolinpa , after some spike, I think the reason is tsup still using esbuild 0.17.6, and in 0.17.9 esbuild removed the filter of directives.
To resolve this issue, we may need to upgrade esbuild version.

cc: @egoist

[teobler]

I raised a PR for this fix, after PR merged and use config from @tcolinpa should be fine.