Import client components from a dependency

[dominikgilg]

Hi all!

I'm currently working on a component library which can be used as a dependency for Hydrogen apps.
When importing client components directly from that dependency, I get the following error:

Error: Could not find client component index-LTE0NjQ0MjkzMzQ
    at importClientComponent (http://localhost:3009/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=1a2a396d:45:27)
    at preloadModule (http://localhost:3009/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=1a2a396d:66:17)
    at resolveModule (http://localhost:3009/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=1a2a396d:386:3)
    at processFullRow (http://localhost:3009/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=1a2a396d:444:9)
    at processBinaryChunk (http://localhost:3009/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=1a2a396d:494:5)
    at progress (http://localhost:3009/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js?v=1a2a396d:547:5) 

When I move the same component inside the /src folder of the Hydrogen app, it works fine.
Could you please advice how to import external client components to be rendered within App.server.jsx?
Thanks in advance!

[frandiox]

Client components from external dependencies are a topic that is currently being discussed in the React Server Components RFC. The way you author client components might need to change soon.

That said, you can try the following as of today:

• Export *.client.js components from your library.
• Upgrade to Hydrogen 0.20.0 (the way client components are discovered changes in this version).
• Pass ssr.noExternal: [/your-lib-name/] to Vite.

That should instruct Vite and Hydrogen to look into your library and find client components there.

Hope that helps!

[frandiox]

I don't think it has changed substantially but we've been seeing this "Could not find client component XYZ" error sometimes as well (Shopify/hydrogen#1545). There's a PR now to fix this (#1670), and should be released rather soon.

[dominikgilg]

@frandiox Thank you. With the latest Hydrogen updates (v 1.0.0) this issue is not occurring anymore when using npm run dev.
As soon as I build the app and start it via the entry point dist/node or npm run preview , the issue occurs again.
Do you have any idea what could be the cause for this?

[frandiox]

@dominikgilg Is this still happening? Or did you fix it with optimizeDeps.exclude?

Also, adding 3p data to hydrogen.config.js is currently not recommended. If possible, it would be better if this data lived directly in App.server.jsx.

[dominikgilg]

@frandiox It was still happening. For now I fixed it by creating a client component wrapper (NostoComponents.client.jsx) which exists in the direct src/components folder of the Hydrogen app. Inside that wrapper I imported the external client components and render them from within the client component wrapper. That way we don't render external client components directly in a server component and that did the job:

//NostoComponents.client.jsx

import * as NostoComponents from '@nosto/nosto-react';

export default function NostoComponent({type, ...props}) {

  //Render NostoComponent based on type prop:
  const Component = NostoComponents[type];
  if (Component) {
    return <Component {...props} />;
  } else {
    console.error(
      `No NostoComponent found with type: ${type} \n Make sure to pass a correct type attribute.`,
    );
    return <>{props.children}</>;
  }
}

//App.server.jsx

import NostoComponent from '~/components/NostoComponents.client';

function App() {
  return (
    <Suspense/>
      <ShopifyProvider>
        <LocalizationProvider countryCode={countryCode}>
          <CartProvider countryCode={countryCode}>
            <Suspense>
              <DefaultSeo />
            </Suspense>
            <Router>
              <NostoComponent type="NostoProvider" >
                <FileRoutes
                  basePath={countryCode ? `/${countryCode}/` : undefined}
                  routes={routes}
                />
                <Route path="*" page={<NotFound />} />
              </NostoComponent>
            </Router>
          </CartProvider>
          <PerformanceMetrics />
          {import.meta.env.DEV && <PerformanceMetricsDebug />}
          <ShopifyAnalytics />
        </LocalizationProvider>
      </ShopifyProvider>
    </Suspense>
  );
}

It's not ideal though to build that extra layer for using external components, and as it is only happening when building the app for production but not when running in dev mode, the issue should be probably be related to the build process.
Do you have any idea what could be the reason?

[frandiox]

Yes, I have an idea where this could be happening. I'll try to have a look at it this week 👍