bvaughn / react-error-boundary

react-error-boundary version: 4.0.4
node version: 18.13.0
pnpm version: 8.2.0

Relevant code or config

import { ErrorBoundary } from "react-error-boundary";

export default function Home() {
  return (
    <ErrorBoundary fallback={<p>Whoops...</p>}>
      <Broken />
    </ErrorBoundary>
  );
}

function Broken(): JSX.Element {
  throw new Error("Broken");
}

What you did:

Tried to render an error boundary inside a server component

What happened:

Got a build error

 error ./src/app/page.tsx
ReactServerComponentsError:

The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.

     ,-[/Users/tom.sherman/code/rsc-error-boundary-bug/node_modules/.pnpm/react-error-boundary@4.0.4_react@18.2.0/node_modules/react-error-boundary/dist/react-error-boundary.js:158:1]
 158 | var $faefaad95e5fcca0$exports = {};
 159 | 
 160 | 
 161 | "use client";
     : ^^^^^^^^^^^^^
 162 | $parcel$exportWildcard(module.exports, $6d6d4999e62b3ee0$exports);
 163 | $parcel$exportWildcard(module.exports, $4a61716688322eb0$exports);
 164 | $parcel$exportWildcard(module.exports, $3c4937b727a6fcfb$exports);
     `----

The error was caused by importing 'react-error-boundary/dist/react-error-boundary.js' in './src/app/page.tsx'.

Import path:
  ./src/app/page.tsx

Reproduction repository:

https://github.com/tom-sherman/rsc-error-boundary-bug

Problem description:

Suggested solution:

It's fixed by moving the "use client" to the top of the module

tom-sherman/rsc-error-boundary-bug@c8f38b0

FWIW it's already at the top of the entry file:

react-error-boundary/src/index.ts

Lines 1 to 9 in 9f743e1

    
           "use client"; 
        
           export * from "./ErrorBoundary"; 
        
           export * from "./ErrorBoundaryContext"; 
        
           export * from "./useErrorBoundary"; 
        
           export * from "./withErrorBoundary"; 
        
           // TypeScript types 
        
           export * from "./types";

But something (ParcelJS bundler?) is moving it to nearly the bottom of the bundled file.

Basically I need to solve this problem:

I could add a post-processing step, but I think this would break source maps. I'm not sure how to hook into Parcel's build cycle to do this, and I don't see any related issues on GitHub.

Suggestions welcome!

Filed parcel-bundler/parcel#9050 asking for direction.

Let's see if 82dc8cd helps for now. Hopefully someone will weigh in on the Parcel issue with a better approach.

Published as 4.0.5

Note that 4.0.7 has a better solution in place for this.

	"use client";

	export * from "./ErrorBoundary";
	export * from "./ErrorBoundaryContext";
	export * from "./useErrorBoundary";
	export * from "./withErrorBoundary";

	// TypeScript types
	export * from "./types";

Error when rendering inside a server component in Next.js