SolidJS•7mo ago

`unstable_clientOnly` doesn't solve SSR issues when importing a dependency

I'm running SolidStart and have had some issues throughout with certain deps that do not play well on the server side. Usually this has been resolved using unstable_clientOnly to ignore the dependency on the server side. This time it's not working though. This works fine in my component using npm run dev, but not using npm run build.

const HexColorPicker = unstable_clientOnly(async () => (await import("solid-colorful")).HexColorPicker);

const HexColorPicker = unstable_clientOnly(async () => (await import("solid-colorful")).HexColorPicker);

I have tried

export default defineConfig({
  plugins: [solid({ adapter: vercel({ edge: false })})],
  optimizeDeps: {
    include: [],
    exclude: ["solid-colorful"],
  },
  ssr: {
    noExternal: ["solid-colorful"],
  },
});

export default defineConfig({
  plugins: [solid({ adapter: vercel({ edge: false })})],
  optimizeDeps: {
    include: [],
    exclude: ["solid-colorful"],
  },
  ssr: {
    noExternal: ["solid-colorful"],
  },
});

to no success. The component itself is also wrapped in a unstable_clientOnly so it's content shouldn't even be loaded on the server at all. I can't fathom why npm run build is even trying to go over the file at all. ANY help or pointers would be much appreciated as I have been struggling for hours at this point

1 Reply

Vincent Udén•7mo ago

I ended up switching color picker library, but I still would love to know what the actual problem was

Gaming

Programming

`unstable_clientOnly` doesn't solve SSR issues when importing a dependency