dynamic route ignores use client

Question

I'm encountering an error, only in production. Hosting on AWS Amplify. I never get the error when building locally.

Error: Cannot access .propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

I thought I'd found the component causing the issue, and added a series of use client directives all the way through the component tree to try and stop the problem.

My tree is Page (with use client) > Component > Component > Component

My understanding is that on a page with use client all the children components of it will inherit the use client is that not correct? It's frustrating that I haven't had this error in local dev it only happens on production.

Is there a way to turn on enhanced logging for a production build (not hosted in a prod environment)?

Havana · Answer

I've pinned this down to a route I believed to be client side was in fact server side, and thus erroring.

A pseudo repro of where I was going wrong was

/src/app/foo/[bar]/page.tsx

use client;

const Page = () => {
  return(<></>)
}

export default Page;

I was expecting this to be a client page but it infact builds as a server side page. And some of the business logic I had in there was not designed for server. Interesting that there is no error / warning that using 'use client' in a dynamic route page has no effect.

dynamic route ignores use client

1 Reply