Could the "use client" compilation error take tree-shaking into account?

[jjenzz]

backstory: i'm using webpack still and i've been fiddling with different conventions for structuring projects. i realised that if i do the following i get the compilation error about a missing "use client" directive:

// src/app/page.tsx
import * as Foo from '@/components/foo';

export default function Page() {
  return <Foo.ServerComponent />
}

// src/components/foo/index.ts
export * from './foo';
export * from './foo.client';

// src/components/foo/foo.tsx
const ServerComponent = () => null;

// src/components/foo/foo.client.tsx
import { usePathname } from 'next/navigation';

export const ClientComponent = () => {
  const pathname = usePathname();
  return null;
}

now i know it is referring to the fact that i am not using "use client" here, but i was surprised to see this error given the ClientComponent isn't being imported or used anywhere. my understanding is that it would be tree-shaken from the bundle. this led me to try the following:

// .src/components/foo/foo.client.tsx
- import { usePathname } from 'next/navigation';
+ import * as NextNavigation from 'next/navigation';

export const ClientComponent = () => {
  const pathname = NextNavigation.usePathname();
  return null;
}

and that worked! the "use client" error goes away 🎉 this is exactly what i want, but trying to remember that named imports can cause things to throw (seemingly unnecessarily) is a bit of a pain.

@leerob is there anything that can be done to improve this error handling on nextjs side so that it only errors if the client import hasn't been tree-shaken? is there a reason why the import types are treated differently? keen to understand this better so any help is super appreciated ☺️

the downside to using import * as NextNavigation is that i no longer get the built-in "use client" compilation error when using the ClientComponent in an RSC. it errors, but its an obscure error that doesn't make the actual issue clear.