React "use client" directive with parceljs bundler

[ar124officialwd]

Parceljs is unable to deal with "use client" directive. I've a monorepo (pnpm workspaces + turborepo). apps/web is dependent on pkgs/ui that includes UI components. Since components are all client side and need to access client side APIs, I need to add "use client" directive in my ui bundle file. Parcel bundler is misplacing the directive in output bundles, though the source file pkgs/ui/src/index.ts has used the directive at the top. Bundle has the directive somewhere at the bottom.

How I may resolve this issue with minimal work (desireably if parcel could deal it on its side)?

Key considerations is dev / watch mode. When working in development mode with turbo dev that will call all workspaces (apps/web pkgs/lib pkgs/ui) dev scripts - solution should work seamlessly when any of these gets rebuilt.

I've posted same question on StackOverflow but couldn't gain an attention. Please see https://stackoverflow.com/questions/77781797/react-use-client-directive-with-parceljs-bundler

---

Source

pkgs/ui/src/index.ts

"use client"

export * from './button'
// ...
// ...
// ...

Bundle

pkgs/ui/dist/module.js

var $k6BiE$reactjsxdevruntime = require("react/jsx-dev-runtime");
var $k6BiE$ar124officialwdlib = require("@ar124officialwd/lib");
var $k6BiE$react = require("react");

// ...
// ...
// ...

"use client";
$parcel$exportWildcard(module.exports, $8aff37b36b5eccbe$exports);


//# sourceMappingURL=module.js.map

Desired Bundle

pkgs/ui/dist/module.js

"use client";
var $k6BiE$reactjsxdevruntime = require("react/jsx-dev-runtime");
var $k6BiE$ar124officialwdlib = require("@ar124officialwd/lib");
var $k6BiE$react = require("react");

// ...
// ...
// ...

$parcel$exportWildcard(module.exports, $8aff37b36b5eccbe$exports);


//# sourceMappingURL=module.js.map