[Feature?]: clientOnly dx for named exports #2064

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

clientOnly only supports components that are default export so it seems like use these 2 things together is currently not great developer experience. I got it to work like this.

const Component = clientOnly(() =>
  import("./component").then((r) => ({ default: r.Component })),
);

I see that clientOnly has an options payload, and I think it would be a good idea to add an "export" variable to that options object. so it could mesh well with the existing implementation, instead of hardcoding module.default it can use module[options.export] and we can make the default value of options.export = 'default'

Examples 🌈

Here is what existing vs proposed use could be

// current
const Component = clientOnly(() =>
  import("./component").then((r) => ({ default: r.Component })),
);

// proposed
const Component = clientOnly(() => import('./component'), { export: 'Component'});

Motivation 🔦

I saw this open issue that mentions allowing components to be beside the route files that use them when using by not exposing a default export #1882 and I think that is a fantastic solution for that and feels like the right choice.

but it doesn't work very cleanly with clientOnly