Using chakra-ui-solid in SolidStart

Two settings, and each prevents a failure whose error message names our package rather than the missing line.

export default {
  ssr: {
    noExternal: [/^@chakra-ui-solid\//],
  },
  optimizeDeps: {
    exclude: [
      "@chakra-ui-solid/components",
      "@chakra-ui-solid/system",
      "@chakra-ui-solid/styled-system",
    ],
  },
};

ssr.noExternal — what it prevents

We publish JSX-preserved .jsx under the "solid" export condition. Node cannot import raw JSX, so an externalized dependency is one the server tries to import() verbatim. The build fails with a syntax error pointing inside our dist, which reads as a broken package.

noExternal tells Vite to inline our packages into the SSR bundle so vite-plugin-solid compiles them, the same way it compiles your own source.

optimizeDeps.exclude — what it prevents

The client build pre-bundles dependencies with a scanner that compiles JSX as React. A pre-bundled @chakra-ui-solid/components therefore produces a runtime that is not Solid — and the symptom is not an error. It is a component that renders nothing at all.

Excluding our packages routes them back through vite-plugin-solid.

Why not just ship compiled output

Because “compiled” is not one thing. A client build, a server build and a hydrating client build are three different compilations of the same JSX, and only your toolchain knows which one you need. Shipping source moves that work into your build, which is the trade — these two lines are its whole cost.